關(guān)鍵要點

• 國際化 (i18n) 是創(chuàng)建或轉(zhuǎn)換產(chǎn)品和服務(wù)的過程，以便它們可以適應(yīng)當(dāng)?shù)氐恼Z言和文化。本地化 (l10n) 是為特定地區(qū)或語言調(diào)整國際化軟件的過程。
• Globalize 是一個由 jQuery 團(tuán)隊成員開發(fā)的用於國際化和本地化的 JavaScript 庫。它使用官方Unicode CLDR JSON 數(shù)據(jù)，支持所有主要瀏覽器，並提供數(shù)字格式化和解析、日期和時間格式化和解析、相對時間格式化、貨幣格式化、消息格式化、複數(shù)支持和單位支持等功能。
• JavaScript 通過國際化 API（也稱為 ECMA-402）提供對國際化的原生支持。但是，由於瀏覽器之間支持率低且不一致，Globalize 沒有使用它。
• Globalize 可以通過 npm 安裝，它為其每個功能提供一個模塊，允許開發(fā)人員只使用他們需要的模塊。它通過不在庫中託管或嵌入任何語言環(huán)境數(shù)據(jù)來分離代碼和內(nèi)容。
• 使用 Globalize，開發(fā)人員可以格式化日期、數(shù)字和貨幣值，解析數(shù)字以及格式化相對日期。該庫的文檔提供了有關(guān)如何使用這些功能和其他功能的詳細(xì)信息。

本文由 Julian Motz、Panayiotis Velisarakos、Vildan Softic 和 Tim Severien 共同評審。感謝所有 SitePoint 的同行評審員，使 SitePoint 的內(nèi)容達(dá)到最佳狀態(tài)！

假設(shè)您是一位開發(fā)人員，正在開發(fā)下一個熱門產(chǎn)品。您的客戶喜歡您的產(chǎn)品，它在所有社交網(wǎng)絡(luò)上都獲得了極高的評價。更棒的是，公司首席執(zhí)行官剛剛獲得了 10,000,000 美元的資金，用於拓展新市場。但在您走向全球之前，必須更新產(chǎn)品以支持不同的語言、貨幣、日期格式等等。您猜怎麼著？您和您的團(tuán)隊將負(fù)責(zé)實現(xiàn)這一目標(biāo)。從技術(shù)角度來說，您的軟件必須進(jìn)行國際化，然後進(jìn)行本地化。

國際化（也稱為 i18n）是創(chuàng)建或轉(zhuǎn)換產(chǎn)品和服務(wù)的過程，以便它們可以輕鬆適應(yīng)特定的當(dāng)?shù)卣Z言和文化。本地化（也稱為 l10n）是為特定地區(qū)或語言調(diào)整國際化軟件的過程。換句話說，國際化是使您的軟件能夠支持多種文化（貨幣格式、日期格式等）的過程，而本地化是實現(xiàn)一種或多種文化的過程。

這兩個過程通常被對不同國家感興趣的公司採用，但它們也可能對從事自己網(wǎng)站工作的單個開發(fā)人員有所幫助。例如，您可能知道，我是意大利人，我擁有一個網(wǎng)站。我的網(wǎng)站目前使用英語，但我可能會決定將其國際化，然後將其本地化為意大利語。這對母語為意大利語且不熟悉英語的人非常有益。

在本文中，我將向您介紹 Globalize，這是一個由 jQuery 團(tuán)隊的一些成員開發(fā)的用於國際化和本地化的 JavaScript 庫。本文中演示的所有代碼片段都可以在我們的 GitHub 存儲庫中找到。

但在深入研究 Globalize 之前，我想用項目負(fù)責(zé)人 Rafael Xavier de Souza 的話來結(jié)束這段關(guān)於 i18n 的簡短介紹：

開發(fā)人員認(rèn)為 i18n 是關(guān)於翻譯成非英語語言的。 i18n 只需要將當(dāng)前應(yīng)用程序擴(kuò)展到多個國家或市場。我一直試圖解釋說，i18n 是關(guān)於“交談”的。每個應(yīng)用程序在某些時候都必須與其用戶“交談”。為了與用戶交談，應(yīng)用程序可能需要復(fù)數(shù)支持、性別變格、日期格式化、數(shù)字格式化和貨幣格式化。即使是用英語，正確完成這項工作也可能很棘手。

什麼是 Globalize？

Globalize 是 一個利用官方 Unicode CLDR JSON 數(shù)據(jù)的用於國際化和本地化的 JavaScript 庫。 該庫是開源的，由 Rafael Xavier de Souza 以及 jQuery 團(tuán)隊的一些成員開發(fā)。

Globalize 基於 Unicode Consortium 的通用語言環(huán)境數(shù)據(jù)存儲庫 (CLDR)，這是目前可用的最大且最全面的語言環(huán)境數(shù)據(jù)標(biāo)準(zhǔn)存儲庫。因此，與嵌入語言環(huán)境數(shù)據(jù)的庫不同，如果您使用 Globalize，則可以輕鬆地始終使用最新的 CLDR 數(shù)據(jù)。

該庫適用於瀏覽器和 Node.js 模塊。 Globalize 1.0 支持所有主要瀏覽器，包括 IE9 、Chrome、Firefox、Safari 5.1 和 Opera 12.1 。

該庫的主要功能包括：

• 數(shù)字格式化和解析
• 日期和時間格式化和解析
• 相對時間格式化
• 貨幣格式化
• 消息格式化
• 複數(shù)支持
• 單位支持

我最喜歡 Globalize 的一點是它為其每個功能都提供了一個模塊。開發(fā)人員可能不需要整個庫，因此可以選擇需要的模塊。另一個有趣的功能是，與其他庫不同，它通過不在庫中託管或嵌入任何語言環(huán)境數(shù)據(jù)來保持代碼與內(nèi)容分離。

但是 Globalize 並不是唯一的選擇。如果您對其他替代方案感興趣，Rafael 有一個專門的頁面。最值得注意的替代方案是 i18next。

Globalize 和 JavaScript 國際化 API

對你們中的一些人來說，這可能會令人驚訝，但 JavaScript 通過國際化 API（也稱為 ECMA-402）提供對國際化的原生支持。 Intl 對像是在窗口對像上可用的對象，它充當(dāng)國際化 API 的命名空間。此 API 目前提供的方法可以格式化數(shù)字和日期，以及以特定語言比較字符串。

既然您知道國際化 API 的存在，您可能會認(rèn)為 Globalize 在幕後使用它。這種方法肯定會提高日期和數(shù)字格式化的性能。但是，由於瀏覽器之間的支持率低且非常不一致，因此該庫沒有使用它。

在我們繼續(xù)討論 Globalize 之前，我想讓您體驗一下國際化 API。

格式化日期

我將展示的第一個示例使用國際化 API 以多種語言環(huán)境格式化日期：IT、US 和 GB。

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

在此示例中，我使用指定的語言環(huán)境（“it-IT”、“en-US”和“en-GB”）使用 DateTimeFormat 構(gòu)造函數(shù)創(chuàng)建一個新的日期格式化器。然後，我調(diào)用 format 方法來格式化日期對象。

上面的代碼也可用作 JSBin。

格式化數(shù)字

如前所述，API 還允許您格式化數(shù)字。下面顯示了一個使用 NumberFormat 構(gòu)造函數(shù)的示例：

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

通過查看此第二個代碼片段（也可用作 JSBin）的輸出，您可以注意到，在意大利，我們對數(shù)字的格式與美國和英國不同。

如前所述，對該 API 的支持率較低，但如果您想使用它，可以在應(yīng)用程序中使用此 polyfill。

既然我已經(jīng)讓您更好地了解了國際化和本地化是如何工作的，那麼讓我們討論 Globalize。

安裝和使用 Globalize

Globalize 可以通過 npm 輕鬆安裝：

npm install globalize cldr-data --save

此命令還會安裝 CLDR 數(shù)據(jù)，這是加載 Globalize 將使用的語言環(huán)境數(shù)據(jù)（例如，在某種語言中數(shù)字或日期的格式）所必需的。安裝這兩個包後，我們就可以使用該庫了。

注意：以下示例假設(shè)使用 Node。如果您有興趣在瀏覽器中使用 Globalize，我建議您從項目主頁上的一個示例開始。 webpack 示例使快速啟動和運行特別容易。

接下來，我將使用 Globalize 重寫上一節(jié)中列出的兩個代碼片段。

格式化日期

第一個示例可以按如下所示實現(xiàn)：

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

儘管很簡單，但上面的代碼允許我涵蓋幾個主題。第一次使用 Globalize 時，我覺得有點奇怪的是，CLDR 數(shù)據(jù)使用的一些語言代碼只使用兩個字母。為了保持一致性，我希望所有語言環(huán)境都需要 ISO 3166 標(biāo)準(zhǔn)的完整版本（例如，“it-IT”和“en-US”），而不是簡短版本（例如，“it”和“en”）。雖然假設(shè)意大利語為意大利語的默認(rèn)值似乎是合理的（畢竟意大利語起源於意大利），但這對於英語來說是令人困惑的。 “en”代表美國英語，而不是英國英語。如果您想確保不會犯和我一樣的錯誤，我建議您查看此表。

另一個值得概述的概念是 entireSupplemental 方法（代碼的第三個語句）。這將加載包含國家/地區(qū)或其語言環(huán)境數(shù)據(jù)的補充信息的所有文件。例如，電話國家代碼（意大利為 39）、人口、一些眾所周知的縮寫、如何拼寫其他國家的貨幣等等。

我想介紹的最後一點是第四個語句，其中我調(diào)用 entireMainFor 方法。這允許加載所需國家/地區(qū)的語言環(huán)境數(shù)據(jù)（在上面的示例中為意大利、美國和英國）。

格式化數(shù)字

對於格式化數(shù)字，Globalize 提供了 formatNumber 方法。該方法的簽名是

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

其中 value 是要格式化的數(shù)字，options 是一個用於自定義方法返回值的對象。您可以指定的一些選項示例包括：

• round：定義如何對數(shù)字進(jìn)行舍入。其值可以是以下任何值：ceil、floor、round 或 truncate
• useGrouping：一個布爾值，指示是否應(yīng)使用分組分隔符
• minimumIntegerDigits：一個非負(fù)整數(shù)，指示要使用的最小整數(shù)位數(shù)。

可以在文檔中找到可用的完整選項列表。

既然我們已經(jīng)了解了 formatNumber 方法的更多信息，讓我們看看它的實際應(yīng)用。

npm install globalize cldr-data --save

格式化貨幣值

該庫提供了一個 currencyFormatter 方法來幫助您格式化貨幣值。此方法支持許多選項，讓您可以定義是否要對數(shù)字進(jìn)行舍入，是否要使用貨幣的符號（例如“$”）或其代碼（例如“USD”），等等。

下面顯示了 currencyFormatter() 的一個使用示例：

// 包含 Globalize 庫
var Globalize = require('globalize');

// 包含 CLDR 數(shù)據(jù)
var cldrData = require('cldr-data');

// 加載補充數(shù)據(jù)
Globalize.load(cldrData.entireSupplemental());

// 加載指定語言環(huán)境的數(shù)據(jù)
Globalize.load(cldrData.entireMainFor('it', 'en', 'en-GB'));

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(Globalize('it').formatDate(date));

// "6/30/2016"
console.log(Globalize('en').formatDate(date));

// "30/06/2016"
console.log(Globalize('en-GB').formatDate(date));

解析數(shù)字

解析數(shù)字也可能是您必須執(zhí)行的任務(wù)，例如處理用戶輸入時。以下示例演示瞭如何執(zhí)行此操作：

formatNumber(value[, options])

格式化相對日期

現(xiàn)代 Web 應(yīng)用中的另一個非常常見的功能是以相對術(shù)語顯示時間和日期。例如，您通常會發(fā)現(xiàn)諸如“昨天”和“上週”之類的標(biāo)籤，而不是顯示一天的完整日期。借助 Globalize，通過 relativeTimeFormatter 方法可以輕鬆完成此任務(wù)。下面顯示了一個使用示例：

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

Globalize 提供了許多我沒有在本文中介紹的其他方法。但是，此處介紹的主題應(yīng)該為您提供了足夠的信息來幫助您開始使用。此外，該庫的文檔非常詳細(xì)。

結(jié)論

在本文中，我討論了國際化和本地化是什麼以及為什麼它們對於擴(kuò)展產(chǎn)品的市場非常重要。我通過提及一些受支持的功能簡要介紹了國際化 API，然後，我展示了它們的一些使用示例。

在本文的第二部分中，我向您介紹了 Globalize，這是一個由 jQuery 團(tuán)隊開發(fā)的用於國際化和本地化的 JavaScript 庫。該庫非常強大，並附帶了您可能需要的所有方法來國際化您的項目，例如：解析數(shù)字、格式化日期和格式化貨幣值的方法。如果您認(rèn)為該庫為您節(jié)省了時間，請隨時通過為該項目做出貢獻(xiàn)來回饋。

再次提醒您，本文中演示的所有代碼片段都可以在我們的 GitHub 存儲庫中找到。

關(guān)於在 JavaScript 中實現(xiàn)國際化 (i18n) 的常見問題解答 (FAQ)

國際化 (i18n) 在 JavaScript 中的重要性是什麼？

國際化，通?？s寫為 i18n，是 Web 開發(fā)的一個重要方面，尤其是在為全球受眾創(chuàng)建應(yīng)用程序時。它涉及準(zhǔn)備您的網(wǎng)站或應(yīng)用程序以支持多種語言和區(qū)域差異。這在 JavaScript 中尤其重要，JavaScript 是一種廣泛用於 Web 開發(fā)的語言。通過在 JavaScript 中實現(xiàn) i18n，開發(fā)人員可以創(chuàng)建滿足不同用戶群體的應(yīng)用程序，從而增強用戶體驗和可訪問性。它還有助於本地化應(yīng)用程序，這可以顯著提高應(yīng)用程序的覆蓋範(fàn)圍和可用性。

i18n 在 JavaScript 中是如何工作的？

JavaScript 中的 i18n 通過允許開發(fā)人員將特定於語言環(huán)境的字符串或消息從應(yīng)用程序的代碼中外部化來工作。然後，這些字符串存儲在單獨的文件中，通常稱為資源包。每個資源包對應(yīng)於一個特定的語言環(huán)境。當(dāng)應(yīng)用程序運行時，它會識別用戶的語言環(huán)境並加載相應(yīng)的資源包。這樣，應(yīng)用程序就可以以用戶首選的語言顯示消息和內(nèi)容。

用於在 JavaScript 中實現(xiàn) i18n 的一些流行庫是什麼？

有幾個庫可用於在 JavaScript 中實現(xiàn) i18n。一些最流行的庫包括 i18next、i18n-js 和 Globalize。這些庫提供了一系列功能來促進(jìn)國際化，例如語言檢測、複數(shù)化、數(shù)字和日期格式化等等。它們還支持各種框架，如 React、Angular 和 Vue.js，使它們成為 Web 開發(fā)的多功能工具。

如何在我的 JavaScript 項目中使用 i18n-js 庫？

要在您的 JavaScript 項目中使用 i18n-js 庫，您首先需要使用 npm 或 yarn 安裝它。安裝後，您可以將其導(dǎo)入到您的項目中並開始使用其功能。該庫提供用於翻譯字符串、格式化數(shù)字和日期等等的功能。您還可以在單獨的 JSON 文件中定義您的翻譯，該庫可以根據(jù)用戶的語言環(huán)境加載這些文件。

我可以在不使用庫的情況下在 JavaScript 中實現(xiàn) i18n 嗎？

是的，可以在不使用庫的情況下在 JavaScript 中實現(xiàn) i18n。這可以通過手動將特定於語言環(huán)境的字符串從您的代碼中外部化並將它們存儲在單獨的文件中來完成。但是，對於較大的應(yīng)用程序，這種方法可能非常耗時且複雜。使用庫可以簡化流程並提供可以增強應(yīng)用程序國際化的附加功能。

如何在 i18n 中處理複數(shù)化？

由於不同語言的複數(shù)形式規(guī)則不同，因此在 i18n 中處理複數(shù)化可能很棘手。但是，許多 i18n 庫都提供了處理複數(shù)化的功能。例如，i18n-js 庫提供了一個 pluralize 函數(shù)，可以根據(jù)用戶的語言環(huán)境處理複數(shù)形式。

如何測試我的應(yīng)用程序的國際化？

測試應(yīng)用程序的國際化包括檢查應(yīng)用程序是否根據(jù)用戶的語言環(huán)境正確顯示不同語言的內(nèi)容和格式。這可以通過手動更改瀏覽器中的語言環(huán)境設(shè)置或使用自動化測試工具來完成。檢查邊緣情況也很重要，例如缺少翻譯或複數(shù)形式不正確。

如何在 i18n 中處理日期和數(shù)字格式？

不同語言環(huán)境之間的日期和數(shù)字格式可能大相徑庭。許多 i18n 庫都提供了根據(jù)用戶的語言環(huán)境格式化日期和數(shù)字的功能。例如，i18n-js 庫提供了 formatDate 和 formatNumber 函數(shù)，可以處理這些任務(wù)。

如何在 i18n 中處理從右到左 (RTL) 語言？

在 i18n 中處理從右到左 (RTL) 語言涉及根據(jù)用戶的語言環(huán)境調(diào)整應(yīng)用程序的佈局和文本方向。這可以使用 CSS 和 HTML 屬性來完成。一些 i18n 庫還提供了處理 RTL 語言的功能。

如何與 i18n 一起處理本地化 (l10n)？

本地化，通?？s寫為 l10n，涉及將您的應(yīng)用程序適應(yīng)特定的語言環(huán)境，包括翻譯內(nèi)容、格式化日期和數(shù)字等等。雖然 i18n 準(zhǔn)備了您的應(yīng)用程序以支持多個語言環(huán)境，但 l10n 涉及為每個特定語言環(huán)境實現(xiàn)這些調(diào)整。許多 i18n 庫還提供了處理本地化的功能。

以上是如何在JavaScript中實施國際化（I18N）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！