JavaScript國際化

了解如何使用JavaScript進行國際化

Intl是一個強大的對象，它暴露了JavaScript國際化API。

它公開了以下屬性：

Intl.Collator：使您可以訪問對語言敏感的字符串比較
Intl.DateTimeFormat：使您可以訪問對語言敏感的日期和時間格式
Intl.NumberFormat：使您可以訪問對語言敏感的數字格式
Intl.PluralRules：使您可以訪問對語言敏感的複數格式和復數語言規則
Intl.RelativeTimeFormat：使您可以訪問語言敏感的相對時間格式

它還提供了一種方法：Intl.getCanonicalLocales()。

Intl.getCanonicalLocales()使您可以檢查語言環境是否有效，並為其返回正確的格式。它可以接受字符串或數組：

Intl.getCanonicalLocales('it-it') //[ 'it-IT' ]
Intl.getCanonicalLocales(['en-us', 'en-gb']) //[ 'en-US', 'en-GB' ]

並在語言環境無效的情況下引發錯誤

Intl.getCanonicalLocales('it_it') //RangeError: Invalid language tag: it_it

您可以使用try / catch塊來捕獲。

不同類型可以根據其特定需求與Intl API接口。特別是，我們可以提及：

String.prototype.localeCompare()
Number.prototype.toLocaleString()
Date.prototype.toLocaleString()
Date.prototype.toLocaleDateString()
Date.prototype.toLocaleTimeString()

讓我們來看一下如何使用以上Intl屬性：

國際整理者

此屬性使您可以訪問對語言敏感的字符串比較

您使用以下方法初始化Collator對象new Intl.Collator()，將其傳遞給語言環境，然後您就可以使用它了compare()如果第一個參數在第二個參數之後，則返回一個正值的方法。如果為負數，則為負數；如果為相同值，則為零：

const collator = new Intl.Collator('it-IT')
collator.compare('a', 'c') //a negative value
collator.compare('c', 'b') //a positive value

例如，我們可以使用它來排序字符數組。

國際日期時間格式

此屬性使您可以訪問對語言敏感的日期和時間格式。

您使用初始化一個DateTimeFormat對象new Intl.DateTimeFormat()，將其傳遞給一個語言環境，然後為它傳遞一個日期以按照該語言環境的要求對其進行格式化：

const date = new Date()
let dateTimeFormatter = new Intl.DateTimeFormat('it-IT')
dateTimeFormatter.format(date) //27/1/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-GB')
dateTimeFormatter.format(date) //27/01/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.format(date) //1/27/2019

formatToParts（）方法返回一個包含所有日期部分的數組：

const date = new Date()
const dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.formatToParts(date)
/*
[ { type: 'month', value: '1' },
  { type: 'literal', value: '/' },
  { type: 'day', value: '27' },
  { type: 'literal', value: '/' },
  { type: 'year', value: '2019' } ]
*/

您也可以打印時間。選中您可以使用的所有選項在MDN上。

國際編號格式

此屬性使您可以訪問對語言敏感的數字格式。您可以使用它來格式化數字作為貨幣值。

假設您有一個類似10，它代表某物的價格。

您想將其轉換為$10,00。

如果數字多於3位，則應該以不同的方式顯示，例如，1000應該顯示為$1.000,00

但是，這是美元。

不同的國家有不同的慣例來顯示價值。

JavaScript使我們很容易ECMAScript國際化API，這是一種相對較新的瀏覽器API，可提供許多國際化功能，例如日期和時間格式。

它得到很好的支持：

Browser support for the internationalization API

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})
formatter.format(1000) // “$1,000.00”
formatter.format(10) // “$10.00”
formatter.format(123233000) // “$123,233,000.00”

這minimumFractionDigits屬性將小數部分始終設置為至少2位數字。您可以檢查可以在哪些其他參數中使用NumberFormat MDN頁面。

本示例為意大利國家/地區為歐元創建數字格式器：

const formatter = new Intl.NumberFormat('it-IT', {
  style: 'currency',
  currency: 'EUR'
})

國際規則

此屬性使您可以訪問對語言敏感的複數格式和復數語言規則。我發現Mathias Bynens在Google Developers門戶上的示例我唯一可以涉及到的實際用法是：給有序數字加上後綴：0th，1st，2nd，3rd，4th，5th。

const pr = new Intl.PluralRules('en-US', {
    type: 'ordinal'
})
pr.select(0) //other
pr.select(1) //one
pr.select(2) //two
pr.select(3) //few
pr.select(4) //other
pr.select(10) //other
pr.select(22) //two

每次我們得到other，我們將其翻譯為th。如果我們有one，我們用st。為了two我們用nd。few得到rd。

我們可以使用一個對象來創建一個關聯數組：

const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

然後我們執行格式化函數以引用對像中的值，然後返回包含原始數字及其後綴的字符串：

const format = (number) => `${number}${suffixes[pr.select(number)]}`

現在我們可以像這樣使用它：

format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd

請注意，Intl即將推出許多不錯的功能，例如Intl.RelativeTimeFormat和Intl.ListFormat，僅在撰寫本文時才在Chrome和Opera中提供。