關(guān)鍵要點(diǎn)

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

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

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

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

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

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

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

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

什么是 Globalize？

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

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

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

該庫(kù)的主要功能包括：

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

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

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

Globalize 和 JavaScript 國(guó)際化 API

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

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

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

格式化日期

我將展示的第一個(gè)示例使用國(guó)際化 API 以多種語(yǔ)言環(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));

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

上面的代碼也可用作 JSBin。

格式化數(shù)字

如前所述，API 還允許您格式化數(shù)字。下面顯示了一個(gè)使用 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));

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

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

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

安裝和使用 Globalize

Globalize 可以通過(guò) npm 輕松安裝：

npm install globalize cldr-data --save

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

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

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

格式化日期

第一個(gè)示例可以按如下所示實(shí)現(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));

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

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

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

格式化數(shù)字

對(duì)于格式化數(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 是一個(gè)用于自定義方法返回值的對(duì)象。您可以指定的一些選項(xiàng)示例包括：

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

可以在文檔中找到可用的完整選項(xiàng)列表。

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

npm install globalize cldr-data --save

格式化貨幣值

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

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

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

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

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

// 加載指定語(yǔ)言環(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ù)，例如處理用戶輸入時(shí)。以下示例演示了如何執(zhí)行此操作：

formatNumber(value[, options])

格式化相對(duì)日期

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

// 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 提供了許多我沒(méi)有在本文中介紹的其他方法。但是，此處介紹的主題應(yīng)該為您提供了足夠的信息來(lái)幫助您開始使用。此外，該庫(kù)的文檔非常詳細(xì)。

結(jié)論

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

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

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

關(guān)于在 JavaScript 中實(shí)現(xiàn)國(guó)際化 (i18n) 的常見問(wèn)題解答 (FAQ)

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

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

i18n 在 JavaScript 中是如何工作的？

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

用于在 JavaScript 中實(shí)現(xiàn) i18n 的一些流行庫(kù)是什么？

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

如何在我的 JavaScript 項(xiàng)目中使用 i18n-js 庫(kù)？

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

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

是的，可以在不使用庫(kù)的情況下在 JavaScript 中實(shí)現(xiàn) i18n。這可以通過(guò)手動(dòng)將特定于語(yǔ)言環(huán)境的字符串從您的代碼中外部化并將它們存儲(chǔ)在單獨(dú)的文件中來(lái)完成。但是，對(duì)于較大的應(yīng)用程序，這種方法可能非常耗時(shí)且復(fù)雜。使用庫(kù)可以簡(jiǎn)化流程并提供可以增強(qiáng)應(yīng)用程序國(guó)際化的附加功能。

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

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

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

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

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

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

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

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

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

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

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