导读

在 JavaScript 中，日期和时间的处理与格式化是非常常见的需求。JavaScript 提供了内置的 Date 对象用于操作日期和时间，但它的格式化功能较为有限。为了更方便地格式化日期，通常需要结合一些额外的工具或库。本文涵盖了从基础到进阶的日期格式化技巧。

使用原生 Date 对象

我们可以通过多种方式创建 Date 对象，例如传入特定的时间戳、字符串或指定的年、月、日、时、分、秒。

1
2
3
4
const date = new Date();
const date1 = new Date(2024, 8, 13); // 注意：月份从0开始
const date2 = new Date("2024-09-13T10:20:30Z");
const date3 = new Date(1694596830000); // 时间戳

获取日期和时间的各个部分

JavaScript 提供了各种方法来获取日期的不同部分，例如年、月、日、小时、分钟等。

1
2
3
4
5
6
7
8
const date = new Date();
console.log(date.getFullYear()); // 获取年份
console.log(date.getMonth()); // 获取月份，0表示1月，11表示12月
console.log(date.getDate()); // 获取当月的某一天
console.log(date.getHours()); // 获取小时
console.log(date.getMinutes()); // 获取分钟
console.log(date.getSeconds()); // 获取秒
console.log(date.getDay()); // 获取星期几，0表示星期天

格式化日期字符串

默认情况下， Date 对象提供了几种内置的方法将日期转换为字符串：

  • toDateString(): 返回日期的简短表示形式，例如 "Fri Sep 13 2024".
  • toTimeString(): 返回时间部分，例如 "10:20:30 GMT+0000 (Coordinated Universal Time)".
  • toISOString(): 返回标准的 ISO 8601 格式，例如 "2024-09-13T10:20:30.000Z".
  • toLocaleDateString(): 根据本地化设置格式化日期。
  • toLocaleTimeString(): 根据本地化设置格式化时间。
    1
    2
    3
    4
    5
    const date = new Date();
    console.log(date.toISOString()); // 2024-09-13T10:20:30.000Z
    console.log(date.toDateString()); // Fri Sep 13 2024
    console.log(date.toLocaleDateString('zh-CN')); // 2024/9/13
    console.log(date.toLocaleString('en-US')); // 9/13/2024, 10:20:30 AM

自定义格式化

在实际的开发中，除了通过原生的 Date 对象获取日期数据外。需要使用自定义日期格式也是相当大的一部分应用场景，这时则需要通过手动拼接或使用正则表达式从 Date 对象中提取不同的部分。例如：

1
2
3
4
5
6
7
8
9
10
11
12
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份加1，确保是两位数
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return \`${year}-${month}-${day} ${hours}:${minutes}:${seconds}\`;
}

const date = new Date();
console.log(formatDate(date)); // 2024-09-13 10:20:30

以上是一个基础版本的自定义格式化方法，我们可以再扩展一下，让它支持自定义的时间格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function formatDate(date, format = "yyyy-MM-dd HH:mm:ss") {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    const toSymbol = () => {
      return hours > 12 ? "PM" : "AM";
    };
    const hasSymbol = format.indexOf('a') > -1
    const symbols = {
      yyyy: year,
      MM: \`${month}\`.padStart(2, "0"),
      dd: \`${day}\`.padStart(2, "0"),
      HH: \`${hours}\`.padStart(2, "0"),
      hh: hasSymbol && hours > 12 ? hours - 12 : hours,
      mm: \`${minutes}\`.padStart(2, "0"),
      ss: \`${seconds}\`.padStart(2, "0"),
      // a 表示12小时制
      a: toSymbol(),
    };
    let time = format;

    Object.keys(symbols).forEach((key) => {
      time = time.replace(key, symbols[key]);
    });

    return time;
}

// 2024-10-26 PM 1:06:43 12 小时制
console.log(formatDate(new Date(), "yyyy-MM-dd a hh:mm:ss"));

本地化格式化

除了对日期自定义格式的格式化需求，针对大型的平台型项目，就需要本地化格式化或者说是国际化的日期格式化支持，新的 Intl.DateTimeFormat API 为我们国际化日期格式提供了标准接口。

Intl.DateTimeFormat

Intl.DateTimeFormat 是 JavaScript 语言内置的国际化工具，允许我们以本地化方式格式化日期。

1
2
3
4
5
6
7
8
9
10
11
const date = new Date();
const formatter = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
});
console.log(formatter.format(date)); // 2024/09/13 10:20:30

你可以通过修改选项来控制输出格式，例如：

  • year, month, day ：控制日期部分
  • hour, minute, second ：控制时间部分
  • hour12: 是否使用12小时制

Intl.DateTimeFormat 的浏览器兼容性

Intl DateTimeFormat.png

Intl.DateTimeFormat 的浏览器支持情况还是比较理想的，如果你希望使用标准的日期国际化格式的解决方案，Intl.DateTimeFormat 目前是一个不错的选择。

处理时区

除了处理个性化的日期格式，国际化的日期格式外，另外一个对于大型应用需要处理的一个日期的问题就是处理跨时区的日期数据。

原生 JavaScript 时区

JavaScript 原生的 Date 对象默认会根据系统的时区显示时间。如果需要转换时区，可以使用 toLocaleString 方法：

1
2
const date = new Date();
console.log(date.toLocaleString('en-US', { timeZone: 'America/New_York' })); // 转换为纽约时间

使用 moment-timezone

1
2
3
4
// 安装 moment-timezone：npm install moment-timezone
const moment = require('moment-timezone');
const newYorkTime = moment.tz("America/New_York").format('YYYY-MM-DD HH:mm:ss');
console.log(newYorkTime); // 纽约当前时间

使用 dayjs 时区插件

1
2
3
4
5
6
7
8
const dayjs = require('dayjs');
const utc = require('dayjs/plugin/utc');
const timezone = require('dayjs/plugin/timezone');
dayjs.extend(utc);
dayjs.extend(timezone);

const newYorkTime = dayjs().tz("America/New_York").format('YYYY-MM-DD HH:mm:ss');
console.log(newYorkTime); // 纽约当前时间

使用第三方库

除了自己亲历亲为处理各种日期格式问题外，使用第三方库来处理日期格式问题也是一个不错的选择。下面将介绍一些主流的处理日期数据第三方库。

Moment.js （不推荐用于新项目）

虽然 Moment.js 曾经是处理日期的标准库，但由于体积大、性能问题，已经不再推荐使用新项目。官方建议使用原生 API 或其他更轻量的库。

1
2
3
4
// 安装 Moment.js：npm install moment
const moment = require('moment');
const date = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(date); // 2024-09-13 10:20:30

Day.js

Day.js 是一个现代的、轻量级的日期处理库，API 设计类似于 Moment.js。

1
2
3
4
// 安装 Day.js：npm install dayjs
const dayjs = require('dayjs');
const date = dayjs().format('YYYY-MM-DD HH:mm:ss');
console.log(date); // 2024-09-13 10:20:30

Day.js 支持多种插件扩展，例如时区、相对时间等。

date-fns

date-fns 是另一个流行的日期处理库，功能强大且模块化。你可以根据需要仅引入部分功能。

1
2
3
4
// 安装 date-fns：npm install date-fns
const { format } = require('date-fns');
const date = new Date();
console.log(format(date, 'yyyy-MM-dd HH:mm:ss')); // 2024-09-13 10:20:30

date-fns 提供了许多实用函数，如格式化、比较、时间计算等，非常适合处理复杂的日期操作。

总结

对于日期格式化，原生的 JavaScript 方法适合处理简单的日期和时间格式化。利用 Date 对象结合手动拼接字符串可以满足大部分需求。 Intl.DateTimeFormat 这个 JavaScript 内置的国际化日期格式化工具，适合需要处理本地化格式的场景。

而如 Day.js 和 date-fns 提供更强大的功能和简便的 API，适合处理复杂的日期操作和格式化需求。大家可以根据自己的实际应用选择合适的解决方案。