/

JavaScript國際化

JavaScript國際化

了解如何在JavaScript中使用國際化

Intl是一個強大的物件，它公開了JavaScript國際化API。

它提供以下屬性：

  • Intl.Collator：允許您進行語言敏感的字符串比較
  • Intl.DateTimeFormat：允許您進行語言敏感的日期和時間格式設定
  • Intl.NumberFormat：允許您進行語言敏感的數字格式設定
  • Intl.PluralRules：允許您進行語言敏感的複數格式設定和複數規則設定
  • Intl.RelativeTimeFormat：允許您進行語言敏感的相對時間格式設定

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

Intl.getCanonicalLocales()讓您可以檢查區域設定是否有效，並返回其正確格式。它可以接受字符串或數組：

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

如果區域設定無效，則會產生錯誤：

1
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屬性：

Intl.Collator

此屬性允許您進行語言敏感的字符串比較。

您可以使用new Intl.Collator()初始化Collator物件，傳遞區域設定，並使用其compare()方法，該方法在第一個參數之後返回正值。如果是反向則返回負值，如果是相同值則返回零。

例如：

1
2
3
const collator = new Intl.Collator('it-IT')
collator.compare('a', 'c') //返回一個負值
collator.compare('c', 'b') //返回一個正值

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

Intl.DateTimeFormat

此屬性允許您進行語言敏感的日期和時間格式設定。

您可以使用new Intl.DateTimeFormat()初始化DateTimeFormat物件，傳遞區域設定，然後將日期傳遞給它以按照該區域設置進行格式設定。

例如：

1
2
3
4
5
6
7
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()方法返回一個包含所有日期部分的數組。

例如：

1
2
3
4
5
6
7
8
9
10
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上查看您可以使用的所有選項。

Intl.NumberFormat

此屬性允許您進行語言敏感的數字格式設定。您可以使用它將數字格式化為貨幣值。

假設您有一個數字為**10**，它表示某物的價格。

您想將其轉換為**$10.00**。

然而，如果數字超過3位數，顯示方式應該不同，例如，**1000應該顯示為$1,000.00**

不同的國家有不同的顯示值的約定。

對於我們來說，JavaScript非常容易，這得益於ECMAScript國際化API，一個相對較新的瀏覽器API，提供了許多國際化特性，如日期和時間格式化。

這得到了廣泛的支持：

瀏覽器對國際化API的支持

例如：

1
2
3
4
5
6
7
8
9
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頁面上查看其他可以使用的參數。

這個例子為意大利國家的歐元貨幣創建了一個數字格式器：

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

Intl.PluralRules

此屬性允許您進行語言敏感的複數格式設定和複數規則設定。我在Google Developers門戶上（Mathias Bynens）找到了一個與實際使用有關的例子：給有序數字添加後綴：0th、1st、2nd、3rd、4th、5th……

例如：

1
2
3
4
5
6
7
8
9
10
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。

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

1
2
3
4
5
6
const suffixes = {
 'one': 'st',
 'two': 'nd',
 'few': 'rd',
 'other': 'th'
}

我們可以創建一個格式化函數，以引用對象中的值，並返回一個包含原始數字及其後綴的字符串：

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

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

1
2
3
4
5
6
7
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支援。