当前位置: 首页 > Web前端 > HTML5

国际化相对时间格式化API:Intl.RelativeTimeFormat

时间:2023-04-04 23:29:57 HTML5

原文:TheIntl.RelativeTimeFormatAPI作者:MathiasBynens(@mathias)现代网络应用程序经常使用“昨天”、“42秒前”或“3个月前”等短语,而不是完整的日期和时间戳。这种相对时间格式变得如此普遍,以至于几个流行的库都实现了本地化的格式化功能。(例如Moment.js、Globalize和date-fns。)实施本地化相对时间格式的一个问题是您需要每种语言的成语或短语列表(例如“昨天”或“上个季度”)。UnicodeCLDR提供此数据,但要在JavaScript中使用它,必须将其嵌入库代码中。不幸的是,这无疑会增加这些库的包大小,从而影响脚本加载时间、解析/编译成本和内存消耗。新的Intl.RelativeTimeFormatAPI将这种负担转移到JavaScript引擎,它可以提供语言环境数据并使其直接可供JavaScript开发人员使用。Intl.RelativeTimeFormat在不牺牲性能的情况下启用相对时间的本地化格式化。用法和示例下面的示例显示了如何创建英文的相对时间格式化程序。constrtf=newIntl.RelativeTimeFormat('en');rtf.format(3.14,'second');//→'3.14秒内'rtf.format(-15,'minute');//→'15分钟ago'rtf.format(8,'hour');//→'8小时后'rtf.format(-2,'day');//→'2天前'rtf.format(3,'周');//→'3周内'rtf.format(-5,'月');//→'5个月前'rtf.format(2,'季度');//→'2季度内'rtf.format(-42,'year');//→'42年前'需要注意的是,传递给Intl.RelativeTimeFormat构造函数的参数必须是BCP47语言标签,或者包含多个语言标签的数组。下面是使用另一种语言(简体中文)的例子:(译注:原文为西班牙语)constrtf=newIntl.RelativeTimeFormat('zh');//或者'zh-Hans-CN'rtf.format(3.14,'second');//→'3.14秒后'rtf.format(-15,'minute');//→'15分钟前'rtf.format(8,'小时');//→'8小时后'rtf.format(-2,'day');//→'2天前'rtf.format(3,'week');//→'3周后'rtf.format(-5,'月');//→'5个月前'rtf.format(2,'quarter');//→'2个季度后'rtf.format(-42,'year');//→'42Yearsago'此外,Intl.RelativeTimeFormat构造函数接受一个可选的选项参数,允许对输出进行细粒度控制。为了说明灵活性,让我们看一下基于默认设置的更多输出://使用默认设置创建一个简体中文相对时间格式化示例。//在这个例子中,我们显式地传入了默认参数constrtf=newIntl.RelativeTimeFormat('zh',{localeMatcher:'bestfit',//othervalues:'lookup'style:'long',//othervalues:'short'or'narrow'numeric:'always',//其他值:'auto'});rtf.format(-1,'day');//→'1天前'rtf.format(0,'day');//→'0天后'rtf.format(1,'day');//→'1天后'rtf.format(-1周');//→'1周前'rtf.format(0,'week');//→'0周后'rtf.format(1,'week');//→'1weeklater'你可能已经注意到上面的格式化程序产生了字符串'1dayago'而不是'yesterday',弱智'0weekslater'而不是'thisweek'。发生这种情况是因为,默认情况下,格式化程序使用数值进行输出。要更改此行为,请将数字选项设置为“自动”(默认值为“始终”):constrtf=newIntl.RelativeTimeFormat('zh',{numeric:'auto'});rtf.format(-1,'天');//→'昨天'rtf.format(-2,'day');//→'前天'rtf.format(0,'day');//→'今天'rtf.format(1,'day');//→'明天'rtf.format(2,'day');//→'后天'rtf.format(-1,'week');//→'lastweek'rtf.format(0,'week');//→'thisweek'rtf.format(1,'week');//→'nextweek'类比其他Intl类,Intl.RelativeTimeFormat除了format方法外,还有一个formatToParts方法。尽管format涵盖了最常见的用例,但如果您需要访问生成的输出的各个部分,formatToParts可能会有所帮助:与其他Intl类一样,Intl.RelativeTimeFormat除了formatToParts方法之外还有一个format方法。虽然format涵盖了最常见的用例,但如果您需要访问生成的输出的各个部分,则formatToParts会很有用:constrtf=newIntl.RelativeTimeFormat('zh',{numeric:'auto'});rtf。format(-1,'day');//→'yesterday'rtf.formatToParts(-1,'day');//→[{type:'literal',value:'yesterday'}]rtf.format(3,'week');//→'3周后'rtf.formatToParts(3,'week');//→[//{type:'integer',value:'3',unit:'week'},//{type:'literal',value:'weekslater'}//]有关其余选项及其行为的详细信息,请参阅提案存储库中的API文档。结论Intl.RelativeTimeFormat默认情况下在V8v7.1.179和Chrome71中可用。随着此API变得越来越广泛可用,您会发现Moment.js、Globalize、date-fns等库从代码库中移除了对硬编码CLDR数据库的依赖,转而使用原生相对时间格式化功能来提高负载-时间性能、分析和编译时性能、运行时性能和内存使用情况。相关链接Intl.RelativeTimeFormat规范提案ECMAScript国际化API