正文

学会在JavaScript中格式化时间：快速掌握日期显示技巧

/0 浏览量
0619

在开发网页或应用时，我们常常需要将时间信息以友好的方式展示给用户。JavaScript 提供了多种方法来格式化日期和时间。下面，我将详细介绍如何在JavaScript中格式化时间，并提供一些实用的技巧。

一、使用内置的 Date 对象

JavaScript 的 Date 对象是处理日期和时间的基石。你可以创建一个 Date 对象，然后使用它的方法来获取日期和时间的不同部分。

1.1 获取日期和时间部分

const now = new Date();

console.log(now.getFullYear()); // 年份
console.log(now.getMonth() + 1); // 月份（0-11，所以需要加1）
console.log(now.getDate()); // 日期
console.log(now.getHours()); // 小时
console.log(now.getMinutes()); // 分钟
console.log(now.getSeconds()); // 秒
console.log(now.getMilliseconds()); // 毫秒

1.2 格式化日期和时间

虽然 Date 对象提供了获取日期和时间的功能，但它本身并不提供格式化输出。我们可以通过字符串模板或正则表达式来实现。

二、使用模板字符串格式化时间

模板字符串是ES6引入的一种简洁的字符串表示方法，它允许我们插入变量和表达式。

2.1 简单的日期格式化

const now = new Date();

const formattedDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;

console.log(formattedDate); // 2023-4-1

2.2 完整的时间格式化

const now = new Date();

const formattedDateTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;

console.log(formattedDateTime); // 2023-4-1 14:30:45

三、使用正则表达式格式化时间

正则表达式是处理字符串的强大工具，也可以用来格式化时间。

3.1 使用正则表达式替换

const now = new Date();

const formattedDateTime = now.toLocaleString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false
}).replace(/(\d+)\/(\d+)\/(\d+),\s?(\d+):(\d+):(\d+)/, '$3-$1-$2 $4:$5:$6');

console.log(formattedDateTime); // 2023-04-01 14:30:45

3.2 使用正则表达式分割和重组

const now = new Date();

const formattedDateTime = now.toLocaleString().split(' ')[0].replace(/-/g, '/');
const formattedTime = now.toLocaleString().split(' ')[1].replace(/:/g, ':');

console.log(formattedDateTime); // 2023/04/01
console.log(formattedTime); // 14:30:45

四、总结

在JavaScript中格式化时间是一个常见的需求。通过使用内置的 Date 对象和字符串模板或正则表达式，你可以轻松地将日期和时间以各种格式展示给用户。希望这篇文章能帮助你快速掌握日期显示技巧。

-- 展开阅读全文 --