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

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

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

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

關(guān)鍵要點

• JavaScript 國際化 API (i18n) 通過支持各種語言和文化規(guī)范，促進了網(wǎng)絡應用程序?qū)θ蚴鼙姷倪m應。
• 利用 Intl 對象，開發(fā)人員可以根據(jù)本地偏好格式化日期、時間、數(shù)字和列表，這些偏好可能因地區(qū)而異。
• API 包括 Intl.DateTimeFormat() 和 Intl.NumberFormat() 等函數(shù)，這些函數(shù)接受區(qū)域設置標識符以用戶熟悉的格式呈現(xiàn)信息。
• 高級功能，如相對時間格式化 (Intl.RelativeTimeFormat) 和復數(shù)敏感格式化 (Intl.PluralRules)，允許更細致和更符合文化規(guī)范的應用程序。
• 盡管具有強大的功能，但 JavaScript Intl API 需要仔細實現(xiàn)才能有效處理語言和文化差異，確保應用程序真正實現(xiàn)國際化。

國際化 (I18n) 可能很棘手

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

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

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

Gettext 國際化和本地化系統(tǒng)已經(jīng)存在了幾十年，大多數(shù)編程語言都有可用的庫。

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

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

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

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

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

術(shù)語混亂

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

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

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

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

數(shù)字“1,000”將被解讀為：

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

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

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

JavaScript Intl API

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

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

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

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

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

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

或者，您可以在一行代碼中創(chuàng)建 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(): 返回一個包含格式化字符串的對象數(shù)組，例如 { type: 'weekday', value: 'Monday' }
• resolvedOptions(): 返回一個新對象，其中包含反映所用區(qū)域設置和格式化選項的屬性，例如 dateFormatter.resolvedOptions().locale。

定義區(qū)域設置

所有 Intl 對象都需要一個區(qū)域設置參數(shù)。這是一個字符串，它標識：

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

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

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

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

這可以在另一個 Intl 構(gòu)造函數(shù)中使用。例如：

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

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

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

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

日期和時間

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

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

構(gòu)造函數(shù)傳遞區(qū)域設置和選項對象。這有很多可能的屬性，盡管您很少需要超過 dateStyle 和/或 timeStyle：

（此處應為表格，但由于我無法直接創(chuàng)建表格，我只能提供文字描述。） 表格列出了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() 方法采用兩個日期并以最簡潔的方式格式化期間，具體取決于區(qū)域設置和選項。例如：

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

此方法的瀏覽器支持范圍較小，但在 Chrome 76 中已實現(xiàn)。

相對期間

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

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

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

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

數(shù)字、貨幣、百分比和單位

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

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

構(gòu)造函數(shù)傳遞區(qū)域設置和選項對象：

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

示例：

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

列表

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

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

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

示例：

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

復數(shù)

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

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

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

示例：

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

字符串比較

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

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

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

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

利潤！

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

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

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

關(guān)于 JavaScript 國際化 API (i18n) 的常見問題解答 (FAQ)

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

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

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

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

JavaScript i18n 如何處理數(shù)字格式化？

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

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

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

如何為 JavaScript i18n 指定區(qū)域設置？

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

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

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

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

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

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

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

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

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

我在哪里可以了解更多關(guān)于 JavaScript i18n 的信息？

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

以上是什么是JavaScript國際化API（I18N）？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！