內置於瀏覽器中的國際化API

做者：wanago

翻譯：瘋狂的技術宅

wanago.io/2019/09/02/…

未經容許嚴禁轉載

你的程序頗有可能須要支持多種語言。其中包括對語言敏感的日期處理。一個廣受歡迎的庫Moment.js有助於實現這一目標，它的功能之一是國際化。 其源代碼中包含對許多不一樣語言的本地化。如今這可能已經不是最好的方法了，由於咱們有 ECMAScript 國際化 API。

國際化 API 旨在提供許多應用所需的語言敏感功能。它能夠幫助你完成須要考慮語言的任務。瀏覽器將全部上述功能保留在 Intl 全局對象中，以免發生命名衝突。

使用 DateTimeFormat 處理日期

Intl.DateTimeFormat 是一個構造函數，它容許咱們進行語言敏感的日期處理。

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）。月份能夠表示爲數字或字符串。

咱們還能夠指定是否要用 12 小時制。此處的默認設置取決於區域設置。

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進行查看。

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。

歡迎關注前端公衆號：前端先鋒，領取前端工程化實用工具包。