内置于浏览器中的国际化API

时间 2019-11-08

原文原文链接

做者：wanago
翻译：疯狂的技术宅javascript

https://wanago.io/2019/09/02/...前端

未经容许严禁转载java

你的程序颇有可能须要支持多种语言。其中包括对语言敏感的日期处理。一个广受欢迎的库Moment.js有助于实现这一目标，它的功能之一是国际化。其源代码中包含对许多不一样语言的本地化。如今这可能已经不是最好的方法了，由于咱们有 ECMAScript 国际化 API。git

国际化 API 旨在提供许多应用所需的语言敏感功能。它能够帮助你完成须要考虑语言的任务。浏览器将全部上述功能保留在 Intl 全局对象中，以免发生命名冲突。程序员

使用 DateTimeFormat 处理日期

Intl.DateTimeFormat 是一个构造函数，它容许咱们进行语言敏感的日期处理。github

const date = Date.now();
console.log(new Intl.DateTimeFormat('en-US').format(date)); //  8/30/2019
console.log(new Intl.DateTimeFormat('zh-ch').format(date)); //  2019/8/30

它不只仅可以对日期中数字的规则进行格式化。经过提供额外的选项，还能够委托它翻译诸如周和月的字符串。面试

new Intl.DateTimeFormat(
  'zh-CN',
  { 
    weekday: 'short',
    month: 'long',
    day: '2-digit'
  }
).format(date)

输出：9月05日周四

经过选择传递给 DateTimeFormat 构造函数的内容，咱们能够根据须要对结果进行调整。咱们能够将工做日、时代和月份等属性设置为 long，short 或 narrow。年和日的数值能够设置为 numeric（例如，1）或 2-digit（例如，01）。月份能够表示为数字或字符串。npm

咱们还能够指定是否要用 12 小时制。此处的默认设置取决于区域设置。segmentfault

new Intl.DateTimeFormat(
  'zh-CN',
  { 
    day: '2-digit',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  }
).format(date)

2019年9月05日上午11:41

你还可使用其余一些选项。有关完整列表，请转到MDN进行查看。api

MDN Docs 还提到了 dateStyle 和 timeStyle。那些属性目前处于阶段-3

相对时间格式

经过 ECMAScript 国际化 API，还能够根据所提供的语言处理相对时间的格式。

const formatter = new Intl.RelativeTimeFormat('en');
formatter.format(-1, 'day'); // 1 day ago

经过将 numeric 设置为 auto，咱们也可使用字符串值（若是可用的话）。

const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
formatter.format(-1, 'day'); // yesterday

经过将 style 设置为 long，short 或 narrow，能够配置消息的长度。

const formatter = new Intl.RelativeTimeFormat('en', { style: 'long' });
formatter.format(5, 'year'); // in 5 years

const formatter = new Intl.RelativeTimeFormat('en', { style: 'short' });
formatter.format(5, 'year'); // in 5 yr.

narrow 风格可能相似于某些地区的短风格。

用 Luxon 替换 Moment.js

你可能不肯意用原生 Date API 替换 Moment.js 库的许多有用功能。 Luxon 是一个有趣的选择。这个项目是由 Moment.js 维护者之一发起的，他们但愿提供一些不一样的 API，但不想在 Moment.js 中破坏任何东西。经过从头编写新库，他可以改变一些重要的事情。最重要的是 Luxon 使用了国际化 API。多亏了这一点，它没必要像Moment 那样发布国际化文件。

咱们还须要考虑浏览器支持。 Sine Luxon 专一于使用原生 API，但并不是每一个浏览器都能完整的支持。若是你对此担忧的话，也能够考虑使用 polyfill。有关详细信息，请查看support matrix。

国际化 API 其余很酷的功能

ECMAScript Internationalization API提供了其余有用的功能。其中之一是格式化列表的能力。

使用 Intl.ListFormat 格式化列表

const list = ['Cat', 'Dog', 'Rat'];
new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);

Cat, Dog and Rat

const list = ['Cat', 'Dog', 'Rat'];
new Intl.ListFormat('en-US', { style: 'long', type: 'conjunction' }).format(list);

Cat, Dog, and Rat

注意，此 API 很是精确，甚至考虑到了至关微妙的差别，例如在英国和美国英语的 and 以前使用 serial comma 。

语言敏感的字符串比较

另外一个颇有用的功能是 collator 功能。在比较可能包含某些特定于语言的字符的字符串时会派上用场。 “ä”字母是一个很好的例子，由于它出如今德语和瑞典语的字母表中时的顺序可能不一样。

new Intl.Collator('de').compare('ä', 'z'); // -1

new Intl.Collator('sv').compare('ä', 'z'); // 1

你能够把许多选项传递给 collator 函数。在 MDN docs 中能够找到一个列表

多个规则

经过使用 Intl.PluralRules，咱们可使用多个敏感格式。

例如，你能够用它来肯定在指定语言中使用的复数形式。

new Intl.PluralRules('en-US').select(1); // one

函数返回“one”，因此正确的形式将是“one dog”。

new Intl.PluralRules('en-US').select(41); // other

函数返回“other”，因此正确的形式将是“fourty one dogs”。

另外一个用例是找出序数。

new Intl.PluralRules('en-US', { type: 'ordinal' }).select(41); // one

因为函数的结果为“one”，序数为：41

new Intl.PluralRules('en-US', { type: 'ordinal' }).select(32); // two

由于结果为“2”，序数为：32

格式化数字

格式编号中的规则因语言和国家地区而异。使用 Intl.NumberFormat 能够为给定国家/地区使用正确的格式。

const number = 1025.15;
new Intl.NumberFormat('en-US').format(number); // 1,025.15
new Intl.NumberFormat('ar-EG').format(number); // 输出奇怪的阿拉伯文

你可使用许多不一样的选项。

const number = 125.5678;
new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(number); //￥1,025.15
new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(number); // £125.57

总结

在本文中，咱们了解了 ECMAScript Internationalization API 的基本功能。它可能在不少场合对你有用。我相信知道它可以提供什么是有必要，这样咱们就没必要再去寻找可以作一样事情的外部库。并不是全部浏览器都支持上述功能，记得在使用钱先进行检查，在必要时可使用polyfills。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...