什麼是JavaScript國際化API（I18N）？

英語是世界上使用最廣泛的語言，但只有七分之一的人說英語。它是3.79億人的第一語言（母語），但說普通話的人有9.17億，說西班牙語的人有4.6億，說印地語的人有3.41億。

許多非英語使用者居住在新興市場，這些市場的互聯網增長呈指數級增長。如果您的網絡應用程序可以進行全球翻譯，您的潛在目標市場可能會增加700%！

JavaScript 國際化 API（也稱為 i18n）允許您設計網頁和應用程序，以便它們可以輕鬆適應說不同語言的用戶的需求。

在本文中，我們將研究 API 提供的各種方法以及如何在您的代碼中實現它們以覆蓋更廣泛的國際受眾。

關鍵要點

• JavaScript 國際化 API (i18n) 通過支持各種語言和文化規範，促進了網絡應用程序對全球受眾的適應。
• 利用 Intl 對象，開發人員可以根據本地偏好格式化日期、時間、數字和列表，這些偏好可能因地區而異。
• API 包括 Intl.DateTimeFormat() 和 Intl.NumberFormat() 等函數，這些函數接受區域設置標識符以用戶熟悉的格式呈現信息。
• 高級功能，如相對時間格式化 (Intl.RelativeTimeFormat) 和復數敏感格式化 (Intl.PluralRules)，允許更細緻和更符合文化規範的應用程序。
• 儘管具有強大的功能，但 JavaScript Intl API 需要仔細實現才能有效處理語言和文化差異，確保應用程序真正實現國際化。

國際化 (I18n) 可能很棘手

國際化看起來很容易……直到您嘗試去做它。

基於拉丁語系的語言在表面上可能很相似。例如，請求姓名、電子郵件和日期的表單翻譯如下：

• 西班牙語：nombre、email、fecha
• 法語：nom、e-mail、date
• 德語：name、email、datum

Gettext 國際化和本地化系統已經存在了幾十年，大多數編程語言都有可用的庫。

在更簡單的案例中，您可以使用某種標記化形式。例如，取一個包含以下內容的 HTML 模板：

<code><label> for="name"></label>{{ NAME }}>
</code>

當用戶將英語設置為其主要語言時，這將動態替換為“name”。不幸的是，這就是您的用戶界面問題開始出現的地方：

1. 同一種語言可能有不同的變體。西班牙語在西班牙的用法與在南美洲的用法並不完全相同。
2. 一種語言中的詞在其他語言中可能長得多。例如，“email”在俄語中翻譯為“электронное письмо”。
3. 文本並不總是從左到右排列。有些是從右到左書寫的——例如阿拉伯語、希伯來語、庫爾德語和意第緒語。其他語言可以從上到下書寫，例如中文、韓文、日文和台灣語。

可以通過將文本保持在最少並採用 CSS 屬性（如方向、書寫模式和邏輯尺寸）進行佈局來解決許多問題。

術語混亂

當您的應用程序需要顯示日期、時間、數字、貨幣或單位時，會產生進一步的混淆。

考慮將日期顯示為“12/03/24”。它將被解讀為：

• 使用 MDY 格式的美國居民會將其解讀為“2024 年 12 月 3 日”
• 使用 DMY 格式的歐洲、南美洲和亞洲居民會將其解讀為“2024 年 3 月 12 日”，
• 使用更實用的 YMD 格式的加拿大、中國、日本和匈牙利居民會將其解讀為“2012 年 3 月 24 日”。

（請注意，日期分隔符斜杠並非所有語言中都常用！）

數字“1,000”將被解讀為：

• 美國、英國、加拿大、中國和日本的人會將其解讀為“一千”，
• 西班牙、法國、德國和俄羅斯的人會將其解讀為“一（點零）”，因為這些國家/地區的數字小數部分由逗號分隔。

即使僅在英語中，情況也可能很複雜。 “1,000 米”這個術語表示：

• 對美國居民來說是 1 公里（或 0.62 英里）
• 對英國、加拿大和澳大利亞的人來說是一千個測量儀器的集合！

JavaScript Intl API

鮮為人知的 JavaScript Intl 對像在大多數現代瀏覽器和運行時中實現了 ECMAScript 國際化 API。支持通常很好，甚至 IE11 也具有許多更有用的方法。對於舊版瀏覽器，有一個 polyfill，並且可以像這樣檢測 API：

<code><label> for="name"></label>{{ NAME }}>
</code>

API 有點不尋常。它為日期、時間、數字和列表提供了一些對象構造函數，這些構造函數傳遞區域設置和包含配置參數的可選對象。例如，這是一個指定美國英語的 DateTime 對象：

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

此對象可以多次用於調用傳遞 Date() 值（或可用的 ES6 Temporal）的各種方法。 format 方法通常是最實用的選項。例如：

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

或者，您可以在一行代碼中創建 Intl 對象並運行方法：

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

除了 format() 方法外，某些對像還支持以下方法：

• formatToParts(): 返回一個包含格式化字符串的對像數組，例如 { type: 'weekday', value: 'Monday' }
• resolvedOptions(): 返回一個新對象，其中包含反映所用區域設置和格式化選項的屬性，例如 dateFormatter.resolvedOptions().locale。

定義區域設置

所有 Intl 對像都需要一個區域設置參數。這是一個字符串，它標識：

• 語言子標籤
• 腳本子標籤（可選）
• 地區（或國家/地區）子標籤（可選）
• 一個或多個變體子標籤（可選）
• 一個或多個 BCP 47 擴展序列（可選）
• 專用用途擴展序列（可選）

語言和地區通常就足夠了。例如，“en-US”、“fr-FR”等等。

除了使用字符串外，還可以使用 Intl.locale 對象來構造區域設置，例如使用 12 小時時間格式的美國英語：

<code><label> for="name"></label>{{ NAME }}>
</code>

這可以在另一個 Intl 構造函數中使用。例如：

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

如果未定義區域設置，則使用設備的當前語言和地區設置。例如：

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

這在使用美國設置的設備上返回“5/4/2022”，在使用英國設置的設備上返回“04/05/2022”。

日期和時間

以下工具顯示了使用 Intl.DateTimeFormat() 格式化的日期和時間的示例（如果您的語言或地區未列出，我們深感抱歉！）：

（此處應嵌入CodePen示例，但由於我無法直接嵌入外部資源，我只能提供文字描述。） CodePen示例展示了使用Intl.DateTimeFormat()格式化不同地區和語言的日期和時間的多種方法，包括不同的日期樣式（full, long, medium, short）和時間樣式（full, long, medium, short），以及其他選項例如calendar, timeZone等。

構造函數傳遞區域設置和選項對象。這有很多可能的屬性，儘管您很少需要超過 dateStyle 和/或 timeStyle：

（此處應為表格，但由於我無法直接創建表格，我只能提供文字描述。） 表格列出了Intl.DateTimeFormat()的屬性及其描述，包括dateStyle, timeStyle, calendar, dayPeriod, numberingSystem, localeMatcher, timeZone, hour12, hourCycle, formatMatcher, weekday, era, year, month, day, hour, minute, second, timeZoneName等。

示例：

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

日期範圍

formatRange() 方法採用兩個日期並以最簡潔的方式格式化期間，具體取決於區域設置和選項。例如：

<code>const starwarsDay = new Intl.DateTimeFormat('en-US').format( new Date('2022-05-04') );
</code>

此方法的瀏覽器支持範圍較小，但在 Chrome 76 中已實現。

相對期間

Intl.RelativeTimeFormat() 對象可以顯示相對於此時此刻的期間。選項對象具有較少的選項：

（此處應為表格，但由於我無法直接創建表格，我只能提供文字描述。） 表格列出了Intl.RelativeTimeFormat()的屬性及其描述，包括localeMatcher, numeric, style等。

format() 方法傳遞數值和單位：“year”、“quarter”、“month”、“week”、“day”、“hour”、“minute”或“second”。示例：

<code><label> for="name"></label>{{ NAME }}>
</code>

數字、貨幣、百分比和單位

以下工具顯示了使用 Intl.NumberFormat() 格式化數字、貨幣、百分比和測量單位的示例：

（此處應嵌入CodePen示例，但由於我無法直接嵌入外部資源，我只能提供文字描述。） CodePen示例展示了使用Intl.NumberFormat()格式化不同地區和語言的數字、貨幣、百分比和單位，包括不同的樣式（decimal, currency, percent, unit）和選項例如notation, currency, currencyDisplay, unit, unitDisplay, useGrouping, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, minimumSignificantDigits, maximumSignificantDigits等。

構造函數傳遞區域設置和選項對象：

（此處應為表格，但由於我無法直接創建表格，我只能提供文字描述。） 表格列出了Intl.NumberFormat()的屬性及其描述，包括numberingSystem, notation, style, currency, currencyDisplay, currencySign, unit, unitDisplay, useGrouping, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, minimumSignificantDigits, maximumSignificantDigits等。

示例：

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

列表

Intl.ListFormat() 對象可以將項目數組格式化為對語言敏感的列表。在英語中，這通常需要在最後一個項目之前添加“and”或“or”。

選項對象可以設置以下屬性：

（此處應為表格，但由於我無法直接創建表格，我只能提供文字描述。） 表格列出了Intl.ListFormat()的屬性及其描述，包括type, style等。

示例：

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

複數

稍微奇怪的 Intl.PluralRules() 對象支持複數敏感語言規則，其中您有多個項目。選項對象可以將 type 屬性設置為：

• 基數：事物的數量（默認值），或
• 序數：事物的排名，例如英語中的第一、第二或第三

select() 方法返回表示數字複數類別（零、一、二、少數、多數或其他）的英語字符串。

示例：

<code><label> for="name"></label>{{ NAME }}>
</code>

字符串比較

最後，Intl.Collator() 對象支持對語言敏感的字符串比較。其選項對象可以設置以下屬性：

（此處應為表格，但由於我無法直接創建表格，我只能提供文字描述。） 表格列出了Intl.Collator()的屬性及其描述，包括collation, numeric等。

compare() 方法比較兩個字符串。例如：

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

利潤！

如果您使用 JavaScript 顯示數據，則應該可以直接使用用戶的本地格式顯示信息。例如，以下代碼定義了一個 dateFormat() 函數，該函數使用 Intl 短日期格式，或者在不支持該格式時回退到 YYYY-MM-DD：

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

這本身並不會使您的應用程序易於國際受眾使用，但它是更接近全球分發的第一步。

關於 JavaScript 國際化 API (i18n) 的常見問題解答 (FAQ)

JavaScript 國際化 API (i18n) 的目的是什麼？

JavaScript 國際化 API（也稱為 i18n）是一個內置的 JavaScript API，它提供對語言敏感的字符串比較、數字格式化以及日期和時間格式化。它允許開發人員通過提供對不同語言和文化約定的支持來使他們的應用程序國際化。這對於在全球範圍內使用的應用程序特別有用，因為它允許它們適應不同地區的語言和格式約定。

JavaScript i18n 如何處理日期和時間格式化？

JavaScript i18n 提供了一個 DateTimeFormat 對象，可用於根據不同的文化約定格式化日期和時間。此對象將區域設置和選項對像作為參數，它們定義要使用的格式約定。選項對象可以指定日期、時間、時區以及日期和時間格式的其他方面的格式。

JavaScript i18n 如何處理數字格式化？

JavaScript i18n 提供了一個 NumberFormat 對象，可用於根據不同的文化約定格式化數字。此對象將區域設置和選項對像作為參數，它們定義要使用的格式約定。選項對象可以指定數字的樣式（十進制、百分比或貨幣）、分組分隔符的使用、最小和最大小數位數以及數字格式的其他方面。

JavaScript i18n 如何處理字符串比較？

JavaScript i18n 提供了一個 Collator 對象，可用於根據不同的文化約定比較字符串。此對象將區域設置和選項對像作為參數，它們定義要使用的比較約定。選項對象可以指定比較的敏感性（基本、重音、大小寫或變體）、數字排序的使用以及字符串比較的其他方面。

如何為 JavaScript i18n 指定區域設置？

創建 DateTimeFormat、NumberFormat 或 Collator 對象時，可以將區域設置指定為參數。區域設置是一個表示語言和地區的字符串，例如美國英語的“en-US”或法國使用的法語的“fr-FR”。如果未指定區域設置，則使用 JavaScript 環境的默認區域設置。

我可以將多個區域設置與 JavaScript i18n 一起使用嗎？

是的，創建 DateTimeFormat、NumberFormat 或 Collator 對象時，可以將多個區域設置指定為數組。 JavaScript i18n 將使用數組中它支持的第一個區域設置。這對於在多個地區使用的應用程序非常有用，因為它允許它們適應不同地區的語言和格式約定。

如何自定義 JavaScript i18n 的格式化選項？

創建 DateTimeFormat、NumberFormat 或 Collator 對象時，可以通過提供選項對象來自定義 JavaScript i18n 的格式化選項。選項對象可以指定格式化或比較的各個方面，例如日期或數字的格式、字符串比較的敏感性等等。

我可以將 JavaScript i18n 與其他 JavaScript API 一起使用嗎？

是的，JavaScript i18n 可以與其他 JavaScript API 結合使用。例如，您可以將 Date 對象與 DateTimeFormat 對像一起使用以格式化日期，或者您可以將 Number 對象與 NumberFormat 對像一起使用以格式化數字。這允許您充分利用 JavaScript 的強大功能來使您的應用程序國際化。

所有瀏覽器都支持 JavaScript i18n 嗎？

大多數現代瀏覽器（包括 Chrome、Firefox、Safari 和 Edge）都支持 JavaScript i18n。但是，舊版瀏覽器或某些移動瀏覽器可能不支持它。您可以查看 Mozilla 開發者網絡 (MDN) 上的兼容性表，以獲取有關瀏覽器支持的最新信息。

我在哪裡可以了解更多關於 JavaScript i18n 的信息？

您可以從官方 ECMAScript 國際化 API 規範、Mozilla 開發者網絡 (MDN) 以及各種在線教程和文章中了解更多關於 JavaScript i18n 的信息。這些資源提供了有關 API 及其用法的詳細信息，以及使 JavaScript 應用程序國際化的示例和最佳實踐。

以上是什麼是JavaScript國際化API（I18N）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！