DeathGhost

Intl.RelativeTimeFormat相对时间格式化

这篇文章发布于 2019年07月17日 21:17 星期三 阅读 384 次,评论 1 条

DeathGhost 编辑,归类于javascript »

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

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

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

#{moment(item.create_time, 'YYYYMMDD').fromNow()}
// 输出: 4 天前

我们在使用上述库去处理无疑又多增加一次请求消耗,现在我们可以直接使用 Intl.RelativeTimeFormat API函数通过JavaScript在不影响性能的条件下轻松实现相对时间的本地化格式化。

Intl.RelativeTimeFormat 相对时间格式化
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数据库的依赖,转而支持本机相对时间格式化功能,从而提高加载时性能,分析和编译时性能,运行时性能和内存使用。

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计1条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

33

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕