# Intl.RelativeTimeFormat相对时间格式化

> 该Intl.RelativeTimeFormat对象是一个构造函数，可以实现本地区域化相对时间格式。犹如Web端我们常见的“昨天”，“20秒前”或“1个月”之类的短语，而不是完整日期和时间戳。

Author: DeathGhost
Published: 2019-07-17 21:17:55
Category: javascript
Canonical: https://www.deathghost.cn/article/javascript/53
Keywords: Intl.RelativeTimeFormat, JavaScript, API, 格式化, 时间格式化, 相对时间格式化, 区域设置, formatToParts, format

Web应用程序通常使用“昨天”，“多少秒前”或“几个月”之类的短语，而不是完整日期和时间戳。这种相对时间格式的值已经变得如此普遍，以至于几个流行的库实现了以局部方式格式化它们的效用函数。（例子包括Moment.js，Globalize和date-fns。）

例如导入库文件后，我们在pug中使用这般：

#{moment(item.create_time, 'YYYYMMDD').fromNow()}
// 输出： 4 天前
我们在使用上述库去处理无疑又多增加一次请求消耗，现在我们可以直接使用 Intl.RelativeTimeFormat API函数通过JavaScript在不影响性能的条件下轻松实现相对时间的本地化格式化。

![Intl.RelativeTimeFormat 相对时间格式化](https://www.deathghost.cn/public/upload/article/2019/07/1563370442458.jpg)

Intl.RelativeTimeFormat 相对时间格式化

## 语法

relativeTimeFormat.format(value, unit)
value: 数值；

unit："year"，"quarter"，"month", "week", "day", "hour", "minute", "second"

## 用法示例

以下示例显示如何使用英文创建相对时间格式化程序。

const rtf = new Intl.RelativeTimeFormat('en');
// output :: in 2 seconds
console.log(rtf.format(2, 'second'));
// output :: 15 minutes ago
console.log(rtf.format(-15, 'minute'));
// output :: in 8 hours
console.log(rtf.format(8, 'hour'));
// output :: 2 days ago
console.log(rtf.format(-2, 'day'));
// output :: in 2 weeks
console.log(rtf.format(2, 'week'));
// output :: 5 months ago
console.log(rtf.format(-5, 'month'));
// output :: in 2 quarters
console.log(rtf.format(2, 'quarter'));
// output :: 10 years ago
console.log(rtf.format(-10, 'year'));
中文设置可以直接设置：

Intl.RelativeTimeFormat 构造函数的参数可设置一个语言标记。

const rtf = new Intl.RelativeTimeFormat('zh-Hans');
输出结果则：

const rtf = new Intl.RelativeTimeFormat('zh-Hans');
// output :: 2秒钟后
console.log(rtf.format(2, 'second'));
// output :: 15分钟前
console.log(rtf.format(-15, 'minute'));
// output :: 8小时后
console.log(rtf.format(8, 'hour'));
// output :: 2天前
console.log(rtf.format(-2, 'day'));
// output :: 2周后
console.log(rtf.format(2, 'week'));
// output :: 5个月前
console.log(rtf.format(-5, 'month'));
// output :: 2个季度后
console.log(rtf.format(2, 'quarter'));
// output :: 10年前
console.log(rtf.format(-10, 'year'));
另外，Intl.RelativeTimeFormat 函数还有一个可选参数设置其输出格式。

如按上述定义

console.log(rtf.format(-1, 'day'));
则会输出："1天前"。

如果我们设这样设置，则会：

const rtf = new Intl.RelativeTimeFormat('zh-Hans', {
  numeric: 'auto', // other values: 'always'
});
输出结果："昨天"。

即：numeric: 'auto' 或 'always';

类似于其他Intl的类，Intl.RelativeTimeFormat有一个formatToParts除了该方法format的方法。虽然format涵盖了最常见的用例，formatToParts但如果您需要访问生成的输出的各个部分，则会很有帮助：

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
rtf.format(-1, 'day');
// → 'yesterday'
rtf.formatToParts(-1, 'day');
// → [{ type: 'literal', value: 'yesterday' }]
rtf.format(3, 'week');
// → 'in 3 weeks'
rtf.formatToParts(3, 'week');
// → [{ type: 'literal', value: 'in ' },
//    { type: 'integer', value: '3', unit: 'week' },
//    { type: 'literal', value: ' weeks' }]
Intl.RelativeTimeFormat默认情况下，在V8 v7.1和Chrome 71中可用。随着此API变得更加广泛可用，您将找到诸如Moment.js，Globalize和date- fns之类的库，从而放弃了对硬编码CLDR数据库的依赖，转而支持本机相对时间格式化功能，从而提高加载时性能，分析和编译时性能，运行时性能和内存使用。

## Related

- Previous: [HTML5 音频或视频实现倍速播放](https://www.deathghost.cn/article/javascript/51)
- Next: [告别低精度累加：JavaScript Math.sumPrecise() 完全解析](https://www.deathghost.cn/article/javascript/128)