一步一步的JavaScript本地化指南

國際化(稱為i18n)和本地化(稱為l10n)非常重要(儘管經常如此)。硬)將在世界範圍內使用的任何應用程序的步驟。在其中一個前幾條我們已經看到了如何在RubyonRails驅動的後端實現i18n，但是今天是時候討論前端了。在本文中，我們將討論如何使用以下解決方案本地化JavaScript應用程序：

• jQuery.I18n
• Airbnb
• jQuery團隊的全球化

所有這些解決方案都是完全不同的，它們都有自己的特點，因此我們將看到它們都在行動中。

源代碼可在GitHub.

Preparations

在進入主要部分之前，讓我們快速地為我們的簡單演示項目準備一個基本結構。創建一個單獨的文件夾。index.html文件在裡面。我們將複製這個文件來測試各種解決方案。然後創建一個嵌套文件夾，名為共同在裡面放置jquery.js可以從jquery.com網站。您可以根據您希望支持的瀏覽器來選擇jQuery(1、2或3)的任何一個版本--對於這個演示程序來說，這並不重要。

現在人口index.html帶有一些標記：

index.html

這對我們來說已經足夠開始了！

jQuery.I18n

讓我們從一個基於jQuery的國際化庫開始，這個庫是由維基媒體。維基媒體是一個全球性的運動，負責維基百科、維基新聞、維基圖書等知名項目。jQuery.I18n反過來，使用基於JSON的本地化文件格式，並支持性別、語法形式、語言的動態變化、回退鏈等。

jQuery.I18n的翻譯可以在多個文件中分隔(en.json, de.json(等)全部存儲在一個文件中。下面是一個例子en.json:

{

"@metadata": {

"authors": [

"Me"

],

"last-updated": "2016-09-21",

"locale": "en",

"message-documentation": "qqq"

},

"appname-title": "Example Application",

"appname-sub-title": "An example application with jquery.i18n"

}

因此，如您所見，這些文件支持元數據，您可以在其中指定作者、最新更新日期、區域設置和其他信息。接下來，以鍵值格式提供實際的翻譯。建議在鍵前加上應用程序的名稱，以使其獨一無二，但這不是強制性的。

對於較小的應用程序，您可以在單文件。在這種情況下，語言的名稱指定為父鍵：

{

"@metadata": { ... }

"en": {

"appname-title": "Example Application"

},

"ru": {

"appname-title": "Тестовое приложение"

}

}

此外，您甚至可以提供翻譯文件的路徑：

{

"@metadata": { ... }

"en": {

"appname-title": "Example Application"

},

"ru": "ru.yml"

}

現在，當然，你想知道如何加載這些翻譯進入你的應用程序。有幾種方法，第一種可能是最簡單的方法。與創建單獨的JSON文件不同，您可以將所有翻譯直接放到腳本中，方法是將它們傳遞給load職能：

$.i18n().load({

'en': {

'appname-title': 'Example Application'

},

'ru' : {

'appname-title': 'Тестовое приложение'

}

});

我不能說這是一個推薦的做法，但對於非常小的項目，它是好的。

另一個解決方案是從外部URL加載消息

$.i18n().load({

en: 'i18n/en.json'

})

使用此方法時，load將返回一個承諾，因此您可以在done職能：

$.i18n().load({

en: 'i18n/en.json'

}).done( function() { console.log('done!') } )

你可以的設置地區在庫的初始化時，使用locale期權

$.i18n( {

locale: 'en'

} );

或者通過在lang屬性的html標籤：

當然，通過重新定義locale備選方案：

$.i18n({

locale: 'de'

});

// or

$.i18n().locale = 'de';

翻譯一封信給你會提供的鑰匙$.i18n功能

$.i18n('message-key1');

或者只是僱用 a data-屬性(不需要額外的JavaScript)。初始內容是要顯示的後備文本，以防出現問題而無法找到翻譯：

Fallback text

注意，消息通過接受參數來支持內插。這些都寫成$1, $2等等：

var message = "Good day, $1";

$.i18n(message, 'Joe');

複數和性別使用以下語法處理：

var message = "Found $1 {{PLURAL:$1|result|results}}";

$.i18n(message, 1);

var message = "$1 changed {{GENDER:$2|his|her}} profile picture";

$.i18n(message, 'Emma', 'female');

在實踐中

要開始，複製我們的基地index.html文件作為jQuery_i18n.html。創建一個新的jQuery_i18n目錄並將main-jQuery_i18n.js文件在裡面。下一個克隆jQuery.I18n在您的PC和子模塊：

$ git clone https://github.com/wikimedia/jquery.i18n.git

$ cd jquery.i18n

$ git submodule update --init

我們將要求從SRC目錄(沒有語言)以及CLDRPluralRuleParser.js從LIBS\CLDRPluralRuleParser\src。將所有這些複製到jQuery_i18n文件夾，然後按正確的順序將它們包括在內：

jQuery_i18n.html

[...]

[...]

讓我們還通過lang屬性：

jQuery_i18n.html

[...]

[...]

最後，添加鏈接以切換語言和幾個空標記，這些標記將託管我們翻譯的內容。我將使用英語和俄語，但當然，你可以選擇任何其他語言-這並不重要，但對於現實世界的應用程序要確保你的文本是正確翻譯, 最好是人類.

jQuery_i18n.html

[...]

English |

Русский

[...]

現在繼續看劇本。我們需要在文檔準備好後立即加載翻譯。為了簡單起見，讓我們將所有消息存儲在腳本中：

main-jQuery_i18n.js

[...]

jQuery(document).ready(function() {

$.i18n().load({

'en': {

'welcome': 'Welcome!',

}

'ru': {

'welcome': 'Добро пожаловать!',

}

});

});

[...]

注意welcome鍵-在data-i18n屬性的h1標籤。這樣就會自動使用適當的轉換-我們所要做的就是通過調用i18n()功能。我會把它從update_texts:

main-jQuery_i18n.js

[...]

jQuery(document).ready(function() {

var update_texts = function() {

$('body').i18n();

};

$.i18n().load({...});

update_texts();

});

[...]

現在讓我們來處理語言轉換。這很簡單-聽一下click事件的提取值。data-locale屬性，然後相應地設置區域設置：

main-jQuery_i18n.js

[...]

$('.lang-switch').click(function(e) {

e.preventDefault();

$.i18n().locale = $(this).data('locale');

update_texts();

});

[...]

最後，我們將為#messages部分。這將變得更加複雜：

main-jQuery_i18n.js

[...]

$.i18n().load({

'en': {

'welcome': 'Welcome!',

'message_from': '$1 has send you $2 {{plural:$2|message|messages}}. {{gender:$3|He|She}} is waiting for your response!'

},

'ru': {

'welcome': 'Добро пожаловать!',

'message_from': '$1 {{gender:$3|отправил|отправила}} вам $2 {{plural:$2|сообщение|сообщений|сообщения}}. {{gender:$3|Он|Она}} ждёт ответа!'

}

});

[...]

在這裡，多元化和性別信息被同時使用。對於俄語，我不得不增加更多的選項，因為多元化規則更為複雜。為了使其工作，可以調整update_texts()職能：

main-jQuery_i18n.js

[...]

var update_texts = function() {

$('body').i18n();

$('#messages').text($.i18n('message_from', 'Ann', 2, 'female'));

};

[...]

現在打開頁面，試著在語言之間切換--一切都應該很好！

Polyglot.js

Polyglot.js是由愛彼迎(一家工程公司)在瀏覽器和Common.js環境中工作。它支持插值和多元化，同時具有零依賴關係。抓取生產版本這裡.

開始和Polyglot合作，實例化:

var polyglot = new Polyglot();

它是基於類的，因此您可以同時使用不同的區域設置。

下一步提供一個短語清單:

polyglot.extend({

"hello": "Hello"

});

// or

var polyglot = new Polyglot({phrases: {"hello": "Hello"}});

作為一種常見的模式，文檔建議在後端準備一個短語散列，然後將它們輸出到script標籤。請注意，Polyglot不會進行翻譯--您的工作是根據用戶的地區提供適當的短語。

短語可以完全替換或刪除(例如，釋放內存)replace或clear方法分別.

注意，嵌套也是受支持的：

polyglot.extend({

"nav": {

"sidebar": {

"welcome": "Welcome"

}

}

});

如果你來自鐵路世界，內插你應該很熟悉：

polyglot.extend({

"hello_name": "Hello, %{name}."

});

若要執行實際翻譯，請使用t方法：

polyglot.t("hello_name", {name: "John"});

如果您的鍵是嵌套的，那麼使用點。.作為分隔符：

polyglot.t("nav.sidebar.welcome");

請注意，語言的名稱在任何地方都沒有提供--目前只有在使用多元化時才使用它。若要設置它，請使用locale功能

polyglot.locale("de")

或在實例化新對象時將其設置為傳遞locale選擇。

消息多元化應該用四個管道分隔(||||):

polyglot.extend({

"num_cars": "%{smart_count} car |||| %{smart_count} cars",

});

正確的消息將根據smart_count參數。

在實踐中

現在，讓我們快速地看到這個解決方案的作用。複製index.html文件並命名它polyglot.html。然後創建一個多角化文件夾並將生產版本里面的劇本。還創建main-polyglot.js在那裡歸檔，把所有東西連接起來：

polyglot.html

[...]

[...]

在這個演示中，我們將使用.js的模板引擎將用於呈現內容(儘管您可以繼續使用車把或其他解決方案)。如果您以前沒有使用過這樣的模板，那麼這個想法非常簡單：您有一個帶有一些參數的標記。然後，該模板將被“編譯”(意味著參數接收它們的值)，並像其他HTML一樣呈現在頁面上。

放置下劃線的製作版本進入共同文件夾並要求：

polyglot.html

[...]

[...]

我將把我們的模板直接放在頁面上，在最下面。注意，它必須用script標記具有特殊類型(防止瀏覽器試圖將其作為JavaScript代碼處理)：

polyglot.html

現在，在腳本中，讓我們等待文檔準備就緒，然後實例化Polyglot類，同時提供兩條消息：

main-polyglot.js

jQuery(document).ready(function() {

var polyglot = new Polyglot({

phrases: {

"hello": "Hello, %{name}!",

"unread": "You have %{smart_count} unread message |||| You have %{smart_count} unread messages"

}

});

});

這裡我們使用了插值和複數(注意參數的名稱)smart_count-當使用另一個名稱時，複數似乎停止工作)。現在讓我們抓住模板

var main_content_temp = _.template($('#main-content').html());

，然後向其中的參數提供值。

$('body').prepend(main_content_temp({

hello: polyglot.t('hello', {name: 'John'}),

unread: polyglot.t('unread', {smart_count: 2})

}));

以下是生成的代碼：

main-polyglot.js

jQuery(document).ready(function() {

var polyglot = new Polyglot({

phrases: {

"hello": "Hello, %{name}!",

"unread": "You have %{smart_count} unread message |||| You have %{smart_count} unread messages"

}

});

var main_content_temp = _.template($('#main-content').html());

$('body').prepend(main_content_temp({

hello: polyglot.t('hello', {name: 'John'}),

unread: polyglot.t('unread', {smart_count: 2})

}));

});

加載HTML文檔並測試它！

全球化

全球化是jQuery核心團隊成員開發的一個相當大的國際化庫。它在瀏覽器中工作(支撐所有現代瀏覽器和IE從版本9開始使用Node.js，提供了許多有用的特性，包括數字、日期和時間解析、多元化、內插、單元支持等等。它的使用為軟件提供了關鍵的構建塊，以支持世界上的語言，擁有最大和最廣泛的地區數據標準存儲庫。更重要的是，全球化模塊化並且不包含任何i18n數據--您可以自己加載它。

有三個主要的API函數：

Globalize.load()以JSON格式加載CLDR區域設置數據(例如日期和時間格式、月份名稱等)

Globalize.locale()-為現場獲取和設置

[new] Globalize-實例化一個新的Globalization對象

此外，您還可以為每個模塊找到各種不同的功能。這裡.

在實踐中

讓我們馬上看看全球化的行動。複製index.html給它起個名字globalize.html。還創建全球化文件夾中的globalize-main.js文件在裡面。只要全球化是模塊化的，相依性必須按照正確的順序加載(甚至有一個在線工具可以幫助您找出需要哪些依賴項)。

因此，您需要下載最新版本的全球化以及CLDR。以下是要抓取的Globalization文件列表(將它們放置在全球化(項目文件夾)：

Dist/globalize.js

Dist/globalization/date.js

區域/全球化/編號.js

Dist/globalization/currency.js

Dist/globalization/message.js

Dist/globalization/Multial.js

不幸的是，這還不是全部。下面是必須放在裡面的所需的CLDR文件cldr文件夾(立即創建)：

Dist/cldr.js

Dist/cldr/event.js

DIST/cldr/addulal.js

哎呀。最後一部分是為cdr提供一些常見的地區數據-下載。這裡並放置在cldr/cldr_data.js名字。最後，將所有這些文件按正確的順序掛起：

globalize.html

[...]

[...]

還為我們的內容添加了兩個佔位符：

globalize.html

[...]

[...]

現在，讓我們加載一條歡迎消息：

globalize-main.js

jQuery(document).ready(function() {

Globalize.loadMessages({

"en": {

'welcome': 'Welcome, {name}!'

}

});

});

這裡我們使用的是消息格式化程序模塊。接下來，實例化Globalization類。

var globalize = new Globalize("en");

並填充#welcome部分：

$('#welcome').text( globalize.messageFormatter('welcome')({name: 'John'}) );

請注意messageFormatter返回一個函數，然後調用該函數並傳遞包含名稱的對象。這可以重寫為

var welcome_message = globalize.messageFormatter('welcome');

$('#welcome').text( welcome_message({name: 'John'}) );

實際上，消息的參數不需要命名--您可能會說0, 1, 2等等：

'welcome': 'Welcome, {0}!'

在本例中，向格式化程序傳遞一個數組：

$('#welcome').text(globalize.messageFormatter('welcome')(['John']));

接下來，提供另一條包含今天和總收入的信息：

"en": {

'welcome': 'Welcome, {0}!',

'earned': 'Today is {date} and you\'ve earned {amount}!'

}

在本例中，我們將使用日期和貨幣格式化者：

$('#earnings').text(

globalize.messageFormatter('earned')({

amount: globalize.formatCurrency(500.5, 'USD'),

date: globalize.formatDate( new Date(), {

datetime: "medium"

})

})

)

在格式化貨幣時，我們傳遞USD作為第二個論點。此參數用於在呈現結果時顯示適當的符號。符號本身定義在clrd_data.js檔案：

"currencies": {

"USD": {

"symbol": "$"

}

}

medium是datetime格式的名稱-它也是在clrd_data.js文件為

"dateTimeFormats": {

"medium": "{1}, {0}"

}

這裡1是日期和0是時候了。日期和時間依次使用下列掩碼進行格式化：

"dateFormats": {

"medium": "MMM d, y"

},

"timeFormats": {

"medium": "h:mm:ss a"

}

現在一切都準備好了，您可以觀察結果了！

PhraseApp再次拯救這一天

管理多種語言的翻譯確實很乏味。然而，有了PhraseApp，整個過程就變得簡單多了。

PhraseApp支持各種各樣的格式，從簡單到嵌套的JSON(以及AngularJS或Reaction的特定格式)。接下來，只需根據需要添加儘可能多的區域設置，並上傳現有的帶有翻譯的JSON文件(如果有的話)。

完成之後，您將能夠快速瞭解哪些翻譯丟失，管理您的密鑰和消息，以及下載更新的翻譯，只需一次點擊。更酷的是，您可以很容易地請求專業翻譯人員的支持(這可能更好，因為本地化不僅僅是關於翻譯)。因此，我真的鼓勵您嘗試一下PhraseApp！

結語

因此，在本文中，我們研究了各種幫助您本地化應用程序的解決方案：jQuery.I18n、Globalization和Polyglot。Polyglot似乎是最小和最簡單的庫，而Globalization和jQuery.I18n是相當大和複雜的--這取決於您選擇哪一個！

希望您能發現這篇文章既有用又有趣。謝謝你和我在一起，快樂的編碼！

為感謝您對我們的認可，特意準備了一些IT入門和進階的乾貨

包括：Java、UI設計、H5前端、Python+人工智能、軟件測試和新媒體運營六大學科視頻資料。以及IT就業大禮包。

線上視頻、音頻，隨時學習觀看

關注我們並私信“資料”即可獲取。