在 ES12 中使用 Intl.DateTimeFormat 来格式化日期

JavaScript 作为一门通用编程语言，在 Web 开发中极为常用。在很多场合下，我们需要输出日期，但是不同地区对于日期格式有不同的需求，如该使用 DD/MM/YYYY 还是 MM/DD/YYYY，该不该显示时间，如何将本地时间转换为 UTC 时间等等。为了解决这些问题，ES12 新增了 Intl.DateTimeFormat，提供了更方便、可定制的日期格式化方法。

简要说明

Intl.DateTimeFormat 可以按照用户的本地化方式来格式化日期，也支持指定格式，例如月日年还是年月日等。DateTimeFormat 提供了可自定义的选项，例如日期和时间格式、地区和时区。比如，下面的代码表示在中国上海使用中文来输出当前时间。

const options = {
    hour12: false,
    timeZone: 'Asia/Shanghai',
    weekday: 'long',
    era:'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};

console.log(new Intl.DateTimeFormat('zh-CN-u-ca-chinese', options).format());

输出：公元2022年12月7日星期三

长格式详解

在上面的代码中，options 是自己定义的参数对象，其属性包括：

• hour12 24小时制还是12小时制
• timeZone 时区
• weekday 星期几（完整格式，长格式）
• era 时间轴（比如公元）
• year 年份
• month 月份
• day 天数

其中 weekday, era, month 等传入的都是样式参数，每个参数也有一些可选样式值，如：

• weekday: long、short、narrow 等；
• year: numeric、2-digit 等；
• month: long、short、narrow（最短）

在代码中 Intl.DateTimeFormat('zh-CN-u-ca-chinese', options) 通过 'zh-CN-u-ca-chinese' 指定使用中国大陆的语言和中国农历的时间标识，'u' 表示开启扩展格式，让日历拥有范围更广泛的用户自定义日期和时间字段，'ca' 表示使用特定的日历系统。

在 options 中，我们设定了使用了24小时制、中国上海时区、用中文输出当前完整格式星期、公元、年、月、日。

示例代码

下面是一个简单的示例代码，演示如何使用 Intl.DateTimeFormat 格式化日期，其中包含了设置时区、设置语言、设置时钟制式、设置星期几等福利。

// 首先新建一个日期对象
const date = new Date();

// UTC 格式：2022-12-07T15:39:50.015Z
console.log(`UTC 格式：${date.toISOString()}`);

// 当前时区：Asia/Shanghai
const options = {
    timeZone: 'Asia/Shanghai'
};
console.log(`当前时区：${date.toLocaleString('zh-CN', options)}`);

// 展示中文日期格式
const format1 = {
    hour12: false,
    timeZone: 'Asia/Shanghai',
    weekday: 'long',
    era:'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};
console.log(`展示中文日期格式：${new Intl.DateTimeFormat('zh-CN-u-ca-chinese', format1).format()}`);

// 展示英文日期格式
const format2 = {
    hour12: false,
    timeZone: 'America/New_York',
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};
console.log(`展示英文日期格式：${new Intl.DateTimeFormat('en-US', format2).format()}`);

输出：

UTC 格式：2022-12-07T15:39:50.015Z
当前时区：2022/12/7 下午11:39:50
展示中文日期格式：公元2022年12月7日星期三
展示英文日期格式：Wednesday, December 7, 2022

总结

Intl.DateTimeFormat 为我们提供了强大的日期格式化方法，可以满足不同国家和地区对于日期格式的需求。开发者可以使用该方法，为用户提供更便捷、易读的输出。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659fe0bbadd4f0e0ff85b066