摘要：前言最近加入到新項(xiàng)目組負(fù)責(zé)前端技術(shù)預(yù)研和選型，其中涉及到一個(gè)熟悉又陌生的需求國(guó)際化本地化。注意蘋(píng)果官網(wǎng)采用的是的機(jī)制提供本地化功能，和本篇主打前端實(shí)現(xiàn)有所區(qū)別。它們分別是處理排序的處理日期格式化的和處理數(shù)字貨幣等格式化的。

?最近加入到新項(xiàng)目組負(fù)責(zé)前端技術(shù)預(yù)研和選型，其中涉及到一個(gè)熟悉又陌生的需求——國(guó)際化＆本地化。熟悉的是之前的項(xiàng)目也玩過(guò)，陌生的是之前的實(shí)現(xiàn)僅僅停留在"有"的階段而已。趁著這個(gè)機(jī)會(huì)好好學(xué)習(xí)整理一下，為后面的技術(shù)選型做準(zhǔn)備。
?本篇將于大家一起挽起袖子擼代碼:)

?在實(shí)現(xiàn)本地化處理前，我們起碼先要獲取Language tag吧？那么獲取方式分為兩類(lèi)
1.直接獲取瀏覽器的Language tag信息
?一般來(lái)說(shuō)瀏覽器語(yǔ)言的版本標(biāo)示著用戶(hù)所屬或所期待接收哪種語(yǔ)言文化風(fēng)俗的內(nèi)容，于是通過(guò)以下函數(shù)獲取瀏覽器的語(yǔ)言信息即可獲取language-tag

function getLang(){
  return navigator.language || navigator.browserLanguage
}

2.用戶(hù)選擇Language tag信息
?大家在瀏覽蘋(píng)果官網(wǎng)時(shí)也會(huì)發(fā)現(xiàn)以下界面，讓我們自行選擇language-tag。

注意蘋(píng)果官網(wǎng)采用的是Server-driven Negotiation的機(jī)制提供本地化功能，和本篇主打前端實(shí)現(xiàn)有所區(qū)別。

?最適當(dāng)?shù)脑O(shè)置和獲取language-tag的方式當(dāng)然就是上述兩種方式相結(jié)合啦！首先自動(dòng)獲取瀏覽器的Language tag信息，并提供入口讓用戶(hù)自行選擇Language tag信息。

?有了本地化識(shí)別的根據(jù)(language tag)后，我們就可以開(kāi)始實(shí)現(xiàn)本地化處理了，但從頭開(kāi)始處理還累了，幸好H5為我們提供新的API來(lái)減輕我們的工作量。它們分別是處理排序的Intl.Collator,處理日期格式化的Intl.DateTimeFormat和處理數(shù)字/貨幣等格式化的Intl.NumberFormat。

?用于字符排序.

new Intl.Collator([locales[, options]])
@param Array|String [locales] - language-tag字符串或數(shù)組
@param Array        [options] - 配置項(xiàng)

options的屬性及屬性值(如無(wú)特別說(shuō)明則values第一個(gè)值為默認(rèn)值)

@prop String localeMatcher
@desc   指定用于locale匹配的算法
@values "best fit" | "lookup"

@prop String usage
@desc   指定用途
@values "sort" | "search"

@prop String sensitivity
@desc   指定對(duì)比時(shí)是否忽略大小寫(xiě)、讀音符號(hào)
@values "base"    - 大小寫(xiě)不敏感,讀音符號(hào)不敏感
        "accent"  - 除采用base規(guī)則外，讀音符號(hào)敏感
        "case"    - 除采用base規(guī)則外，大小寫(xiě)敏感
        "variant" - base,accent和case的并集 

@prop Boolean ignorePunctuation
@desc   指定是否忽略標(biāo)點(diǎn)符號(hào)
@values false | true

@prop Boolean numeric
@desc   指定是否將兩個(gè)數(shù)字字符轉(zhuǎn)換為數(shù)字類(lèi)型再作比較
@values false | true

@prop String caseFirst 
@desc   指定是否以大寫(xiě)或小寫(xiě)作優(yōu)先排序
@values "false" | "upper" | "lower" 

實(shí)例方法

Intl.Collator.prototype.compare(a, b):Number
@desc 比較字符串a(chǎn)和字符串b，若a排在b前面則返回-1，等于則返回0，排在后面則返回1.

Intl.Collator.prototype.resolveOptions():Object
@desc 返回根據(jù)構(gòu)造函數(shù)中options入?yún)⑸傻淖罱K采用的options

?用于日期格式化輸出.

new Intl.DateTimeFormat([locales[, options]])
@param Array|String [locales] - language-tag字符串或數(shù)組
@param Array        [options] - 配置項(xiàng)

options的屬性及屬性值(如無(wú)特別說(shuō)明則values第一個(gè)值為默認(rèn)值)

@prop String localeMatcher
@desc   指定用于locale匹配的算法
@values "best fit" | "lookup"

@prop String timeZone 
@desc   指定被格式化的時(shí)間所在的時(shí)區(qū)
@values [IANA time zone database](https://www.iana.org/time-zones) such as "Asia/Shanghai", "Asia/Kolkata", "America    /New_York", "UTC"

@prop String timeZoneName
@desc   指定格式化后所顯示的時(shí)區(qū)樣式
@values "short" | "long"

@prop Boolean hour12
@desc   指定采用12小時(shí)制還是24小時(shí)制 
@values false | true
@default-value 由locales入?yún)Q定

@prop String year 
@desc 指定年份的樣式
@values "numeric" | "2-digit" | "narrow" | "short" | "long"

@prop String month
@desc 指定月份的樣式
@values "numeric" | "2-digit" | "narrow" | "short" | "long"

@prop String day
@desc 指定日期的樣式
@values "numeric" | "2-digit"

@prop String hour 
@desc 指定小時(shí)的樣式
@values undefined | "numeric" | "2-digit"

@prop String minute
@desc 指定分鐘的樣式
@values undefined | "numeric" | "2-digit"

@prop String second
@desc 指定秒的樣式
@values undefined | "numeric" | "2-digit"

@prop String weekday
@desc 指定周的樣式
@values "narrow" | "short" | "long"

實(shí)例方法

Intl.Collator.prototype.format(a):String
@desc 格式化日期

Intl.DateTimeFormat.prototype.resolveOptions():Object
@desc 返回根據(jù)構(gòu)造函數(shù)中options入?yún)⑸傻淖罱K采用的options

?用于數(shù)字、貨幣格式化輸出.

new Intl.NumberFormat([locales[, options]])
@param Array|String [locales] - language-tag字符串或數(shù)組
@param Array        [options] - 配置項(xiàng)

options的屬性及屬性值(如無(wú)特別說(shuō)明則values第一個(gè)值為默認(rèn)值)

@prop String localeMatcher
@desc   指定用于locale匹配的算法
@values "best fit" | "lookup"

@prop String style
@desc   指定格式化的風(fēng)格
@values "decimal" | "currency" | "percent"
@remark 當(dāng)style設(shè)置為currency后，屬性currency必須設(shè)置

@prop String currency
@desc   指定貨幣的格式化信息
@values 如"USD"表示美元, "EUR"表示歐元, "CNY"表示RMB.[Current currency & funds code first](http://www.currency-iso.org/en/home/tables/table-a1.html)

@prop String currencyDisplay
@desc   指定貨幣符號(hào)的樣式
@values "symbol" | "code" | "name"

@prop Boolean useGrouping
@desc   指定是否采用如千位分隔符對(duì)數(shù)字進(jìn)行分組
@values false | true

@prop Number minimumIntegerDigits
@desc   指定整數(shù)最小位數(shù)
@values 1-21

@prop Number maximumFractionDigits
@desc   指定小數(shù)部分最大位數(shù)
@values 0-20

@prop Number minimumFractionDigits
@desc   指定小數(shù)部分最小位數(shù)
@values 0-20

@prop Number maximumSignificantDigits
@desc   指定有效位最大位數(shù)
@values 1-21

@prop Number minimumSignificantDigits
@desc   指定有效為最小位數(shù)
@values 1-21

注意：minimumIntegerDigits,maximumFractionDigits和minimumFractionDigits為一組，而maximumSignificantDigits和minimumSignificantDigits為另一組，當(dāng)設(shè)置maximumSignificantDigits后，minimumIntegerDigits這組的設(shè)置為全部失效。

?上述Intl接口并不是所有瀏覽器均支持，幸好有大牛已為了我們準(zhǔn)備好polyfill了，但由于Intl.Collator所以來(lái)的規(guī)則和實(shí)現(xiàn)的代碼量較龐大，因此polyfill中僅僅實(shí)現(xiàn)了Intl.DateTimeFormat和Intl.NumberFormat接口而已，不過(guò)對(duì)于一般項(xiàng)目而言應(yīng)該足矣。Intl polyfill
?另外，還對(duì)String,Number和Date的原型作擴(kuò)展，以便我們使用Intl的三劍客！

String.prototype.localeCompare(compareString[, locales[, options]])
Number.prototype.toLocaleString([locales[, options]])
Date.prototype.toLocaleString([locales[, options]])
Date.prototype.toLocaleDateString([locales[, options]])
Date.prototype.toLocaleTimeString(([locales[, options]])

?說(shuō)了這么多那我們?cè)趺醋岉?xiàng)目實(shí)現(xiàn)國(guó)際化/本地化呢？那當(dāng)然要找個(gè)可靠的第三方庫(kù)啦——Format.js，它不僅提供字符串替換還提供日期、數(shù)字和貨幣格式化輸出的功能，而且各大前端框架都已將其作二次封裝，使用得心應(yīng)手呢！

要注意的是它依賴(lài)Intl.NumberFormat和Intl.DateTimeFormat，因此當(dāng)瀏覽器部支持時(shí)需要polyfill一下。

var areIntlLocalesSupported = require("intl-locales-supported");

var localesMyAppSupports = [
    /* list locales here */
];

if (global.Intl) {
    // Determine if the built-in `Intl` has the locale data we need.
    if (!areIntlLocalesSupported(localesMyAppSupports)) {
        // `Intl` exists, but it doesn"t have the data we need, so load the
        // polyfill and replace the constructors with need with the polyfill"s.
        var IntlPolyfill = require("intl");
        Intl.NumberFormat   = IntlPolyfill.NumberFormat;
        Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
    }
} else {
    // No `Intl`, so use and load the polyfill.
    global.Intl = require("intl");
}

intl-locales-supported顧名思義就是檢查原生Intl是否支持特定的Language tag(如cmn-Hans)，若不支持則使用Polyfill版本。
原生JavaScript使用示例:

Polymer組件使用示例:

locales.json

{"en": {"GREETING": "Hello {name}"}
,"fr": {"GREETING": "Bonjour {name}"}}

更多的玩法請(qǐng)參考官網(wǎng)吧！

?項(xiàng)目中我們更多地是采用如Formatjs等上層i18n庫(kù)，而不是更底層的IntlAPI，但若想更好地實(shí)現(xiàn)國(guó)際化和本地化，我想了解Intl及其背后的規(guī)則是十分有必要的。
?另外細(xì)心的你會(huì)發(fā)現(xiàn)上文提到另一個(gè)概念——Server-driven Negotiation，到底它和國(guó)際化/本地化有什么關(guān)系呢？那么請(qǐng)期待下篇——《JS魔法堂:不完全國(guó)際化&本地化手冊(cè) 之 拓展篇》
?尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自:　http://www.cnblogs.com/fsjohn... ^_^肥仔John

Intl