在 Web 开发者的日常工作中，我们经常需要处理各种时间格式和时间计算。相较于全球化和国际化的需求越来越普遍，传统的时间格式化方法，如 toLocaleTimeString() 和 toLocaleDateString() 已经不能很好地满足我们的需求。ES9 之 Intl.RelativeTimeFormat 相对时间格式化的出现，为我们提供了更加灵活、可靠的解决方案。
什么是 Intl.RelativeTimeFormat？
Intl.RelativeTimeFormat 是一个用于相对时间格式化的类，用于对输入的时间进行计算并将其格式化成相对于某个点的时间字符串。例如，“5 分钟前”、“2 天后”等。该类现已成为 ECMAScript 2019 的正式标准。
与传统的时间格式化方式相比，Intl.RelativeTimeFormat 可以针对不同的语言和文化传统灵活地定制输出格式。此外，它还允许我们选择要显示的单位和显示样式。
如何使用 Intl.RelativeTimeFormat？
Intl.RelativeTimeFormat 的使用非常简单，我们只需通过 Intl 对象的静态方法 RelativeTimeFormat() 创建一个 RelativeTimeFormat 实例，并将其用于时间格式化即可。
下面是一个示例：
----- --- - --- ----------------------------- - ------ ------- --- -- --- --- - -------- ------------------------- ----------- -- --- --- - ---- ------------------------- -------- -- --- -- ------ ---- -------------------------- ----------
在上面的代码中，我们首先通过 new 关键字创建了一个 RelativeTimeFormat 的实例 rtf，指定了语言为英语，并在选项中指定了显示方式为 'long'。接下来我们调用 rtf.format() 方法来格式化时间，传入相对时间（以当前时间为基准），以及想要显示的文本单位。
可以看到，Intl.RelativeTimeFormat 对于不同的时间单位和时间间隔，输出的结果都是符合语言习惯的。
选项
Intl.RelativeTimeFormat 为我们提供了多种选项，以便对显示样式和显示方式进行个性化定制。
其中有一些最常用的选项。
locale
指定输出的文本所属的语言，其值是一个语言和地区的标识符。例如 'en' 表示英文，'zh-CN' 表示中文简体等。默认值为系统语言。需要注意的是，使用该选项时应该保证浏览器支持。
style
指定输出文本的显示方式，包括 'long'、'short' 和 'narrow'。默认值为 'long'，即标准的相对时间文本。
numeric
指定输出文本的显示格式，包括 'always' 和 'auto'。默认为 'always'，表示始终按照数字格式输出，例如 “1 day ago”。'auto' 表示当时间超过一定数量时，不再按数字格式输出。
unit
指定输出文本的时间单位。该值应该是 Intl.RelativeTimeFormat['unit'] 中的一个值。
numberingSystem
指定输出文本的数字格式，其值为 'arab'、'hanidec' 或 'native'等。
总结
Intl.RelativeTimeFormat 是一个非常实用的方法，为我们提供了更加人性化的相对时间格式化方案。我们可以通过它定制自己需要的相对时间格式化样式，并且支持多种语言和文化传统。在项目中使用时，需要注意其选项设置，以充分发挥其强大的功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653f482b7d4982a6eb8d12f2