如何在JavaScript中實施國際化（I18N）

關鍵要點

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

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

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

國際化（也稱為 i18n）是創建或轉換產品和服務的過程，以便它們可以輕鬆適應特定的當地語言和文化。本地化（也稱為 l10n）是為特定地區或語言調整國際化軟件的過程。換句話說，國際化是使您的軟件能夠支持多種文化（貨幣格式、日期格式等）的過程，而本地化是實現一種或多種文化的過程。

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

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

但在深入研究 Globalize 之前，我想用項目負責人 Rafael Xavier de Souza 的話來結束這段關於 i18n 的簡短介紹：

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

什麼是 Globalize？

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

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

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

該庫的主要功能包括：

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

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

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

Globalize 和 JavaScript 國際化 API

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

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

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

格式化日期

我將展示的第一個示例使用國際化 API 以多種語言環境格式化日期：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));

在此示例中，我使用指定的語言環境（“it-IT”、“en-US”和“en-GB”）使用 DateTimeFormat 構造函數創建一個新的日期格式化器。然後，我調用 format 方法來格式化日期對象。

上面的代碼也可用作 JSBin。

格式化數字

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

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）的輸出，您可以注意到，在意大利，我們對數字的格式與美國和英國不同。

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

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

安裝和使用 Globalize

Globalize 可以通過 npm 輕鬆安裝：

npm install globalize cldr-data --save

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

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

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

格式化日期

第一個示例可以按如下所示實現：

// 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 數據使用的一些語言代碼只使用兩個字母。為了保持一致性，我希望所有語言環境都需要 ISO 3166 標準的完整版本（例如，“it-IT”和“en-US”），而不是簡短版本（例如，“it”和“en”）。雖然假設意大利語為意大利語的默認值似乎是合理的（畢竟意大利語起源於意大利），但這對於英語來說是令人困惑的。 “en”代表美國英語，而不是英國英語。如果您想確保不會犯和我一樣的錯誤，我建議您查看此表。

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

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

格式化數字

對於格式化數字，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 是要格式化的數字，options 是一個用於自定義方法返回值的對象。您可以指定的一些選項示例包括：

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

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

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

npm install globalize cldr-data --save

格式化貨幣值

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

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

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

// 包含 CLDR 数据
var cldrData = require('cldr-data');

// 加载补充数据
Globalize.load(cldrData.entireSupplemental());

// 加载指定语言环境的数据
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));

解析數字

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

formatNumber(value[, options])

格式化相對日期

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

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

結論

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

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

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

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

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

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

i18n 在 JavaScript 中是如何工作的？

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

用於在 JavaScript 中實現 i18n 的一些流行庫是什麼？

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

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

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

我可以在不使用庫的情況下在 JavaScript 中實現 i18n 嗎？

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

如何在 i18n 中處理複數化？

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

如何測試我的應用程序的國際化？

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

如何在 i18n 中處理日期和數字格式？

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

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

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

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

本地化，通常縮寫為 l10n，涉及將您的應用程序適應特定的語言環境，包括翻譯內容、格式化日期和數字等等。雖然 i18n 準備了您的應用程序以支持多個語言環境，但 l10n 涉及為每個特定語言環境實現這些調整。許多 i18n 庫還提供了處理本地化的功能。

以上是如何在JavaScript中實施國際化（I18N）的詳細內容。更多資訊請關注PHP中文網其他相關文章！