在前端开发中，处理日期时间是一个很常见的需求。ECMAScript 2018 中新增了 Intl API，提供了一系列的国际化功能，其中包括日期时间的格式化和解析。本文将介绍如何使用 Intl API 处理日期时间，以及一些常见的应用场景。
Intl.DateTimeFormat
Intl.DateTimeFormat 是 Intl API 中用于处理日期时间格式化的类。它可以将日期时间对象转换为不同格式的字符串，例如：
-- -------------------- ---- ------- ----- ---- - --- ------- ----- --------- - --- ---------------------------- - ----- ---------- ------ ------- ---- ---------- -------- ------- ----- ---------- ------- ---------- ------- ---------- ------------- ------- --- ------------------------------------ -- ---------------- ---------- -----
在上面的代码中，我们创建了一个日期时间对象 date，然后使用 Intl.DateTimeFormat 类创建了一个格式化器 formatter。其中，第一个参数 'zh-CN' 表示使用中文环境，第二个参数是一个对象，用于指定输出的格式。这里我们指定了年、月、日、星期、小时、分钟、秒和时区的输出。最后使用 formatter.format(date) 将日期时间对象转换为字符串。
除了上面的格式，Intl.DateTimeFormat 还支持很多其他的格式化选项，例如：
- year：年份，支持 'numeric'、'2-digit'、'narrow' 和 'short' 四种格式
- month：月份，支持 'numeric'、'2-digit'、'narrow'、'short' 和 'long' 五种格式
- day：日期，支持 'numeric'、'2-digit' 和 'narrow' 三种格式
- weekday：星期几，支持 'narrow'、'short' 和 'long' 三种格式
- hour：小时，支持 'numeric'、'2-digit' 两种格式
- minute：分钟，支持 'numeric'、'2-digit' 两种格式
- second：秒，支持 'numeric'、'2-digit' 两种格式
- timeZoneName：时区名称，支持 'short'、'long' 两种格式
更多的格式化选项可以参考 MDN 文档。
Intl.DateTimeFormat 解析
除了格式化，Intl.DateTimeFormat 还支持将字符串解析为日期时间对象。例如：
-- -------------------- ---- ------- ----- ---------- - -------------- ---------- ------- ----- ------ - --- ---------------------------- - ----- ---------- ------ ------- ---- ---------- -------- ------- ----- ---------- ------- ---------- ------- ---------- ------------- ------- --- -------------------------------------- -- ---------------------------
在上面的代码中，我们创建了一个日期时间字符串 dateString，然后使用 Intl.DateTimeFormat 类创建了一个解析器 parser。最后使用 parser.parse(dateString) 将字符串转换为日期时间对象。
需要注意的是，解析出来的日期时间对象是一个 UTC 时间，需要根据时区进行转换。
应用场景
下面介绍一些常见的应用场景。
显示本地化日期时间
在前端开发中，我们需要根据用户的本地化设置来显示日期时间。Intl.DateTimeFormat 类可以根据不同的语言环境显示不同的格式。例如：
-- -------------------- ---- ------- ----- ---- - --- ------- ----- --------- - --- ------------------------------ - ----- ---------- ------ ------- ---- ---------- -------- ------- ----- ---------- ------- ---------- ------- ---------- ------------- ------- --- ------------------------------------ -- ------- --- ----- ---------- -------- -- -----
在上面的代码中，我们使用了 undefined 作为第一个参数，表示使用用户的本地化设置。这样就可以根据用户的语言环境显示不同的格式。
显示相对时间
在一些场景下，我们需要显示相对时间，例如“1 分钟前”、“2 小时前”等。Intl API 中提供了一个 Intl.RelativeTimeFormat 类，可以方便地实现这个功能。例如：
const now = new Date();
const past = new Date(now - 2 * 60 * 60 * 1000);
const formatter = new Intl.RelativeTimeFormat('zh-CN', {
numeric: 'auto'
});
console.log(formatter.format((now - past) / 1000, 'hour'));
// 输出：2 小时前在上面的代码中，我们创建了一个当前时间对象 now 和一个 2 小时前的时间对象 past，然后使用 Intl.RelativeTimeFormat 类创建了一个格式化器 formatter。最后使用 formatter.format((now - past) / 1000, 'hour') 将时间差转换为相对时间字符串。
在第二个参数中，我们指定了时间差的单位为小时。第一个参数可以是 'second'、'minute'、'hour'、'day'、'week'、'month' 或 'year'，表示时间差的单位。'auto' 表示自动选择最合适的单位。
需要注意的是，Intl.RelativeTimeFormat 类只能处理时间差，不能直接将日期时间对象转换为相对时间。
总结
Intl API 提供了一系列的国际化功能，其中包括日期时间的格式化和解析。Intl.DateTimeFormat 类可以将日期时间对象转换为不同格式的字符串，Intl.RelativeTimeFormat 类可以将时间差转换为相对时间字符串。这些功能可以方便地应用于前端开发中，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c9a0095b1f8cacd680fe4