Intl.DisplayNames API:言語、地域、スクリプト、通貨名

Intl.DisplayNamesを使用して、言語、地域、スクリプト、通貨名を任意の言語に翻訳します。サポートされるタイプ、スタイルオプション、不明なコードのフォールバック動作について学びます。

Intl.DisplayNames

詳細な説明

Intl.DisplayNames:識別子を人間が読める名前に変換

Intl.DisplayNamesは言語コード、地域コード、スクリプトコード、通貨コードをローカライズされた表示名に変換します。

言語名

const en = new Intl.DisplayNames('en', { type: 'language' });
en.of('ja');     // "Japanese"
en.of('de');     // "German"

const ja = new Intl.DisplayNames('ja', { type: 'language' });
ja.of('en');     // "英語"
ja.of('ja');     // "日本語"

地域名

const en = new Intl.DisplayNames('en', { type: 'region' });
en.of('US');  // "United States"
en.of('JP');  // "Japan"

const ja = new Intl.DisplayNames('ja', { type: 'region' });
ja.of('US');  // "アメリカ合衆国"
ja.of('JP');  // "日本"

通貨名

const en = new Intl.DisplayNames('en', { type: 'currency' });
en.of('USD');  // "US Dollar"
en.of('JPY');  // "Japanese Yen"

const de = new Intl.DisplayNames('de', { type: 'currency' });
de.of('CHF');  // "Schweizer Franken"

スクリプト名

const en = new Intl.DisplayNames('en', { type: 'script' });
en.of('Latn');  // "Latin"
en.of('Arab');  // "Arabic"
en.of('Hans');  // "Simplified Han"

フォールバック動作

const dn = new Intl.DisplayNames('en', {
  type: 'region',
  fallback: 'code',  // または 'none'
});
dn.of('ZZ');  // "ZZ"(fallback: 'code')またはundefined(fallback: 'none')

ユースケース

DisplayNamesは、ユーザーの言語で名前を表示するロケール/言語ピッカー、通貨セレクター、地域ドロップダウンの構築に非常に役立ちます。英語ユーザーに「Language: Japanese」と表示する設定ページは、日本語ユーザーに「Language: 日本語」と表示すべきです。Intl.DisplayNamesを使用することで、これらの識別子の静的な翻訳テーブルを維持する必要がなくなります。

試してみる — Locale String Tester

フルツールを開く