淺析 AngularJS 全球化最優方案（二）

上節我們談到在 AngularJS 裡面拿當前瀏覽器 Locale 的3種方式，本節我們主要討論下 AngularJS 裡面內建的 $locale 服務和用原生 JS 如何擷取瀏覽器 Locale，嚴謹的角度來說是擷取目前使用者瀏覽器的語言列表或者是瀏覽器UI語言。

首先我們聊下 AngularJS 裡面的$locale 服務，很棒的概覽，會讓人感覺眼前一亮，但當我們研讀了它的源碼後，我們會有些許的失望：

'use strict';/** * @ngdoc service * @name $locale * * @description * $locale service provides localization rules for various Angular components. As of right now the * only public api is: * * * `id` – `{string}` – locale id formatted as `languageId-countryId` (e.g. `en-us`) */

目前為止AngularJS 支援的locale 服務還是很弱, 僅提供了一個locale id的格式介面。那麼回到鼻祖原生JS，如何擷取瀏覽器當前的語言或者瀏覽器UI語言。其實 W3C 定義html5 API 規格裡面是這樣寫的： window . navigator . language Returns a language tag representing the user's preferred language.

而具體到實現，每個瀏覽器上面的實現是很狂野的。

Internet Explorer

navigator.languagesSorry! 暫不支援。

navigator.userLanguage 返回使用者設定的第一個語言，可以在 Internet Options > General > Languages 修改。

navigator.browserLanguage 返回當前瀏覽器UI語言，使用者不能修改。跟安裝時選擇的可執行檔版本相關。

navigate.systemLanguage 返回當前OS的語言。

Firefox

navigator.language返回使用者設定的第一個語言，可以在 Internet Options > General > Languages 修改。

Safari

navigator.systemLanguage 在 Safari裡面語言定義是系統層面的，不能在重載。

Chrome

navigator.language  非常堅定，不為使用者慣用語言而動搖，堅持一個瀏覽器 UI 語言為方針。但是做人要公道，之前在寫 chrome 的外掛程式時，意外發現一個 API 可以返回使用者語言列表，這個是一個非同步API。

chrome.i18n.getAcceptLanguages(function(requestedLocales) {

  // 'requestedLocales' is an array of strings.

});

不知不覺夜以深，總結下從前端或者從JS的角度擷取使用者偏好的語言資訊有一定難度，主要體現在API的缺失和對應實現的不一致性。

下一個章節我們會談到如何擷取http要求標頭裡面的accept-language和權重資訊，以及不同方式之間的差異性。