跳至主要内容

`Intl.DisplayNames`

· 閱讀時間約 4 分鐘
Shu-yu Guo ([@_shu](https://twitter.com/_shu)) 和 Frank Yung-Fong Tang

面向全球使用者的網頁應用需要以多種語言展示語言、地區、文字書寫系統和貨幣的名稱。這些名稱的翻譯需要數據，而這些數據可從 Unicode CLDR 獲取。將這些數據作為應用的一部分進行打包會增加開發成本。用戶傾向於一致的語言和地區名稱翻譯，並且隨著世界的地緣政治變化保持數據的最新需要不斷的維護。

幸運的是，大多數 JavaScript 執行環境已經附帶並保持這些翻譯數據的更新。新的 Intl.DisplayNames API 讓 JavaScript 開發者可以直接訪問這些翻譯數據，從而更輕鬆地在應用中顯示本地化名稱。

使用範例​

以下範例展示了如何建立一個 Intl.DisplayNames 對象，以使用 ISO-3166 二位國家代碼 來獲取英文的地區名稱。

const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
regionNames.of('US');
// → 'United States'
regionNames.of('BA');
// → 'Bosnia & Herzegovina'
regionNames.of('MM');
// → 'Myanmar (Burma)'

以下範例使用 Unicode 的語言標識符語法，獲取繁體中文的語言名稱。

const languageNames = new Intl.DisplayNames(['zh-Hant'], { type: 'language' });
languageNames.of('fr');
// → '法文'
languageNames.of('zh');
// → '中文'
languageNames.of('de');
// → '德文'

以下範例使用 ISO-4217 三位貨幣代碼 獲取簡體中文的貨幣名稱。在具有單數和複數形式的語言中，貨幣名稱為單數形式。對於複數形式，可使用 Intl.NumberFormat。

const currencyNames = new Intl.DisplayNames(['zh-Hans'], {type: 'currency'});
currencyNames.of('USD');
// → '美元'
currencyNames.of('EUR');
// → '歐元'
currencyNames.of('JPY');
// → '日元'
currencyNames.of('CNY');
// → '人民幣'

以下範例展示了最後一種受支持的類型——文字書寫系統，在英文中使用 ISO-15924 四位文字代碼。

const scriptNames = new Intl.DisplayNames(['en'], { type: 'script' });
scriptNames.of('Latn');
// → 'Latin'
scriptNames.of('Arab');
// → 'Arabic'
scriptNames.of('Kana');
// → 'Katakana'

對於更進階的使用方式，options 的第二個參數還支持 style 屬性。style 屬性對應於顯示名稱的寬度，可以是 "long"、"short" 或 "narrow" 之中的任一個。不同 style 的值不一定總是存在差異。默認值為 "long"。

const longLanguageNames = new Intl.DisplayNames(['en'], { type: 'language' });
longLanguageNames.of('en-US');
// → 'American English'
const shortLanguageNames = new Intl.DisplayNames(['en'], { type: 'language', style: 'short' });
shortLanguageNames.of('en-US');
// → 'US English'
const narrowLanguageNames = new Intl.DisplayNames(['en'], { type: 'language', style: 'narrow' });
narrowLanguageNames.of('en-US');
// → 'US English'

完整 API​

Intl.DisplayNames 的完整 API 如下。

Intl.DisplayNames(locales, options)
Intl.DisplayNames.prototype.of( code )

構造函數與其他 Intl API 保持一致。其第一個參數是 區域列表，第二個參數是options，包含 localeMatcher、type 和 style 屬性。

"localeMatcher" 屬性與 其他 Intl API 的處理方式相同。type 屬性可以是 "region"、"language"、"currency" 或 "script"。style 屬性可以是 "long"、"short" 或 "narrow"，默認為 "long"。

Intl.DisplayNames.prototype.of( code ) 取決於實例的 type，要求根據以下格式提供 code。

結論​

與其他 Intl API 相似，隨著 Intl.DisplayNames 逐漸被廣泛採用，庫和應用程式將傾向於捨棄打包和運輸自己的翻譯資料，而選擇使用原生功能。

Intl.DisplayNames 支援​