Zum Hauptinhalt springen

`Intl.DisplayNames`

· 4 Minuten Lesezeit
Shu-yu Guo ([@_shu](https://twitter.com/_shu)) und Frank Yung-Fong Tang

Webanwendungen, die ein globales Publikum erreichen, müssen die Anzeigennamen von Sprachen, Regionen, Schriften und Währungen in vielen verschiedenen Sprachen anzeigen. Die Übersetzungen dieser Namen erfordern Daten, die im Unicode CLDR verfügbar sind. Die Aufnahme dieser Daten in die Anwendung verursacht Kosten für die Entwickler. Nutzer bevorzugen wahrscheinlich konsistente Übersetzungen von Sprach- und Regionsnamen, und um diese Daten mit den geopolitischen Entwicklungen der Welt aktuell zu halten, ist eine kontinuierliche Wartung erforderlich.

Glücklicherweise liefern die meisten JavaScript-Laufzeiten bereits die entsprechenden Übersetzungsdaten und halten diese aktuell. Die neue Intl.DisplayNames API gibt JavaScript-Entwicklern direkten Zugriff auf diese Übersetzungen, sodass Anwendungen lokalisierte Namen einfacher anzeigen können.

Anwendungsbeispiele​

Das folgende Beispiel zeigt, wie man ein Intl.DisplayNames-Objekt erstellt, um Regionsnamen auf Englisch unter Verwendung von ISO-3166 2-Buchstaben-Ländercodes zu erhalten.

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

Das folgende Beispiel gibt Sprachennamen auf traditionellem Chinesisch unter Verwendung von Unicodes Sprachbezeichner-Grammatik aus.

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

Das folgende Beispiel gibt Währungsnamen auf vereinfachtem Chinesisch unter Verwendung von ISO-4217 3-Buchstaben-Währungscodes aus. In Sprachen mit unterschiedlichen Singular- und Pluralformen sind die Währungsnamen im Singular. Für Pluralformen kann Intl.NumberFormat verwendet werden.

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

Das folgende Beispiel zeigt den endgültig unterstützten Typ, Skripte, auf Englisch unter Verwendung von ISO-15924 4-Buchstaben-Schriftcodes.

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

Für eine fortgeschrittenere Nutzung unterstützt der zweite Parameter options auch die Eigenschaft style. Die Eigenschaft style entspricht der Breite des Anzeigenamens und kann entweder "long", "short" oder "narrow" sein. Die Werte für verschiedene Stile unterscheiden sich nicht immer. Der Standardwert ist "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'

Vollständige API​

Die vollständige API für Intl.DisplayNames ist wie folgt.

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

Der Konstruktor ist konsistent mit anderen Intl-APIs. Das erste Argument ist eine Liste von Sprachen, und der zweite Parameter ist ein options-Parameter, der die Eigenschaften localeMatcher, type und style enthält.

Die Eigenschaft "localeMatcher" wird wie bei anderen Intl-APIs behandelt. Die Eigenschaft type kann "region", "language", "currency" oder "script" sein. Die Eigenschaft style kann "long", "short" oder "narrow" sein, wobei "long" der Standardwert ist.

Intl.DisplayNames.prototype.of( code ) erwartet die folgenden Formate, je nachdem, wie die Instanz mit type konstruiert wurde.

Fazit​

Wie andere Intl-APIs wird Intl.DisplayNames von Bibliotheken und Anwendungen bevorzugt, sobald es breiter verfügbar ist, und diese werden auf das Verpacken und Liefern eigener Übersetzungsdaten zugunsten der nativen Funktionalität verzichten.

Unterstützung für Intl.DisplayNames​