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我們用ndfew得到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.RelativeTimeFormatIntl.ListFormat,僅在撰寫本文時才在Chrome和Opera中提供。

免費下載我的JavaScript初學者手冊


更多js教程: