在前端开发中，日期和时间的处理经常是一个常见的问题。ECMAScript 2021（ES12）引入了 Intl.DateTimeFormat API，使得 JavaScript 在处理日期时间时更加简单，灵活和可读性更强。本文将深入探讨如何使用 Intl.DateTimeFormat API 格式化日期时间，以及如何使用其各种选项和配置项。
介绍 Intl.DateTimeFormat
Intl.DateTimeFormat 是一个内置对象，用于获取不同语言环境下的本地化日期和时间格式字符串。它可以接受以下两个参数：
- locale：表示一个地区或语言环境的字符串（如“en-US”或“zh-CN”）
- options：用于控制日期和时间的格式和样式的对象
如何使用 Intl.DateTimeFormat
我们可以使用 dateFormat = new Intl.DateTimeFormat([locale], [options]) 创建一个 Intl.DateTimeFormat 实例，如下所示:
const dateFormat = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
console.log(dateFormat.format(new Date())); // 2021年10月15日在上面的示例中，我们创建了一个针对中国大陆的本地化日期格式。 option 包含一个 year，month 和 day 属性，这些属性控制了日期的格式。年份为数字的，月份为完整的月份名称，日期为数字格式。 .format() 函数将一个 Date 对象传递给 dateFormat 实例，以获取格式化的日期字符串。
Intl.DateTimeFormat 选项
Intl.DateTimeFormat API 提供了许多选项来控制日期和时间的格式以及显示样式。下面列出了一些常用的选项：
dateStyle 和 timeStyle
dateStyle 和 timeStyle 分别用于设置指定地区/语言环境下的默认日期和时间格式。它们可以被设置成“full”，“long”，“medium”，“short”或“none”之一。
const dateFormat = new Intl.DateTimeFormat('zh-CN', {
dateStyle: 'full',
timeStyle: 'long'
});
console.log(dateFormat.format(new Date())); // 2021年10月15日星期五 下午8:07:53上面的示例将日期样式设置为“full”，时间样式设置为“long”。 format() 函数将返回一个格式化的日期和时间字符串。
year/month/day
为年份，月份和日期分别指定一个值，您可以使用以下选项: year, month, day。您还可以设置值，以控制年份的显示格式（例如，numeric 或 2-digit）。
const dateFormat = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
});
console.log(dateFormat.format(new Date())); // 2021/10/15将每个选项设置为“numeric”将以数字格式显示日期和时间。在上面的示例中，日期的格式为“年/月/日”。
weekday
您可以通过指定“long”、“short”、“narrow”来选择星期几的显示样式。
const dateFormat = new Intl.DateTimeFormat('zh-CN', {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric'
});
console.log(dateFormat.format(new Date())); // 星期五，2021/10/15上面的示例将日期格式设置为包括星期几，以及数字格式的年/月/日。
hour/minute/second
您可以使用 “hour”、“minute”、“second”选项来控制小时，分钟和秒的显示格式。
-- -------------------- ---- -------
----- ---------- - --- ---------------------------- -
----- ----------
------ ----------
---- ----------
----- ----------
------- ----------
------- ---------
---
--------------------------------- --------- -- ---------- --------上面的示例将完整的日期时间表示为“数字形式”。
timeZone
您可以指定显示的时区，使用“timeZone”选项。它支持字符串形式和对象形式的时区标识符。
-- -------------------- ---- -------
----- ---------- - --- ---------------------------- -
--------- -------------------
----- ----------
------ ----------
---- ----------
----- ----------
------- ----------
------- ---------
---
--------------------------------- --------- -- ----------- ------- --国际化
通过 Intl.DateTimeFormat，我们可以使用正确的文化约定来显示日期时间值。国际化的日期格式对于全球软件/应用程序特别重要。
const dateFormat = new Intl.DateTimeFormat('de-DE', {
day: 'numeric',
year: 'numeric',
month: 'long',
timeZone: 'GMT'
});
console.log(dateFormat.format(new Date())); // 15. Oktober 2021有关日期格式选项和其他有关日期时间的处理细节，请参阅 Mozilla Developer Network 中的 Intl.DateTimeFormat 文档。
结论
Intl.DateTimeFormat 是一个强大的 API，支持使用国际化标准的本地化日期和时间格式。使用它，您可以轻松地创建自定义日期时间格式，并控制其各个组成部分。这使得在处理日期和时间时，JavaScript 代码更加清晰和可读，同时优化了用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677394966d66e0f9aae4d619