Intl.DisplayNames

發布時間 · 標籤為 Intl

觸及全球受眾的 Web 應用程式需要以許多不同的語言顯示語言、地區、文字和貨幣的顯示名稱。這些名稱的翻譯需要資料，而這些資料可在 Unicode CLDR 中取得。將資料打包為應用程式的一部分會耗費開發人員的時間。使用者可能偏好語言和地區名稱的一致性翻譯，而要讓資料與全球地緣政治事件保持最新則需要持續維護。

幸運的是，大多數 JavaScript 執行環境都已發布並持續更新完全相同的翻譯資料。新的 Intl.DisplayNames API 讓 JavaScript 開發人員可以直接存取這些翻譯，讓應用程式能更輕鬆地顯示在地化名稱。

使用範例 #

下列範例顯示如何建立 Intl.DisplayNames 物件，以使用 ISO-3166 2 字母國家代碼 取得英文的地區名稱。

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 3 字母貨幣代碼 取得簡體中文的貨幣名稱。在有單數和複數不同形式的語言中，貨幣名稱為單數。對於複數形式，可以使用 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 4 字母文字代碼 以英文顯示。

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"。不同樣式的值並不總是不同。預設值為 "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 類型而定。

結論 #

與其他 Intl API 一樣，由於 Intl.DisplayNames 變得更加廣泛可用，因此程式庫和應用程式將選擇放棄封裝和傳送自己的翻譯資料，而偏好使用原生功能。

Intl.DisplayNames 支援 #

關於此功能支援清單