在前端开发中，时间的处理是大家需要经常面对的问题。而国际化项目中，不同语言对于时间的表达方法也有所不同。针对这个问题，NPM 包 intl-relative-time-format 应运而生。
简介
intl-relative-time-format 是一个 JavaScript 构建的国际化项目的工具，用于处理相对时间的表示。相对时间表示是指在特定语言环境下，将时间表达为相对于当前时间的间隔时间量。例如，英语中“5 分钟前”表示在当前时间的基础上，过去了 5 分钟。
intl-relative-time-format 包含了 Intl.RelativeTimeFormat 类，提供了一系列 API 来解析和格式化相对时间。它实现了 ECMA-402 Internationalization API Specification 中定义的 API。
安装
在使用 intl-relative-time-format 之前，需要使用 NPM 进行安装。
npm install --save intl-relative-time-format
安装完成后，你就可以在项目中使用这个包了。
使用教程
创建实例
使用 Intl.RelativeTimeFormat 类需要初始化一个实例。使用如下方式创建：
const rtf = new Intl.RelativeTimeFormat('en', { style: 'narrow' });其中，参数 en 表示语言环境，如果需要使用其他的语言环境，则需要相应地修改这个参数。参数 style 表示样式，默认值为 "long"，还有 "short" 和 "narrow" 两个选项。
格式化
在创建实例后，下一步就是使用 format 方法来将时间格式化为相对时间。
const diff = new Date('2021-07-01') - new Date('2021-06-01');
const formatted = rtf.format(Math.round(diff / (1000 * 60 * 60 * 24)), 'day');
console.log(formatted);这段代码可以将两个时间的间隔（毫秒数）转换为天数，并将结果输出为字符串。format 方法接受两个参数，第一个参数是时间间隔，单位为秒。第二个参数是时间间隔的类型，可以是 "second"、"minute"、"hour"、"day"、"week"、"month" 或者 "year"。
检测支持性
在使用 intl-relative-time-format 之前，你需要先检测当前浏览器是否支持这个 API。可以使用以下代码进行检测：
if (typeof Intl === 'undefined' || !Intl.RelativeTimeFormat) {
// 浏览器不支持 Intl.RelativeTimeFormat API
}完整示例
下面是一个使用 intl-relative-time-format 的完整示例，它可以将时间间隔转换为相对时间并输出到网页中。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------ ----------
-------
------
---- ------------------
--------
----- --- - --- ----------------------------- - ------ -------- ---
----- ---- - --- ------------------ - --- -------------------
----- --------- - -------------------------- - ----- - -- - -- - ----- -------
----- ------ - ----------------------------------
---------------- - ---- ----- -------- ------------ ------
---------
-------
-------总结
相对时间的表示在国际化项目中非常重要，因为不同语言环境下对时间的表达方式也有所不同。intl-relative-time-format 提供了一种方便的方法来处理相对时间的表示，它实现了 ECMA-402 Internationalization API Specification 中定义的 API，在处理国际化项目中的时间问题时非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734d890c4f72775837bf