Intl.DisplayNames
The Intl.DisplayNames object enables the consistent translation of language, region, and script display names. It allows you to get the localized name of a language, region, currency, etc., without maintaining a massive translation database yourself.
1. Basic Usage
The constructor takes two optional arguments: locales and options. The of() method returns the display name for a given code.
const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(regionNames.of('US')); // "United States"
console.log(regionNames.of('DE')); // "Germany"
console.log(regionNames.of('FR')); // "France"2. Types
The type option is required and determines what kind of code you are providing.
Language
const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
console.log(languageNames.of('fr')); // "French"
console.log(languageNames.of('zh-Hans')); // "Chinese (Simplified)"Region
const regionNames = new Intl.DisplayNames(['es'], { type: 'region' });
console.log(regionNames.of('US')); // "Estados Unidos"
console.log(regionNames.of('JP')); // "Japón"Script
const scriptNames = new Intl.DisplayNames(['en'], { type: 'script' });
console.log(scriptNames.of('Latn')); // "Latin"
console.log(scriptNames.of('Arab')); // "Arabic"Currency
const currencyNames = new Intl.DisplayNames(['en'], { type: 'currency' });
console.log(currencyNames.of('USD')); // "US Dollar"
console.log(currencyNames.of('EUR')); // "Euro"
console.log(currencyNames.of('JPY')); // "Japanese Yen"3. Styles
You can control the length of the name using the style option.
long: "United States" (default)short: "US"narrow: "US"
const longNames = new Intl.DisplayNames(['en'], { type: 'region', style: 'long' });
const shortNames = new Intl.DisplayNames(['en'], { type: 'region', style: 'short' });
console.log(longNames.of('GB')); // "United Kingdom"
console.log(shortNames.of('GB')); // "UK"4. Fallback
The fallback option determines what happens if the code is unknown.
code: Returns the input code (default).none: Returnsundefined.
const names = new Intl.DisplayNames(['en'], { type: 'region', fallback: 'code' });
console.log(names.of('XX')); // "XX"programming/javascript/vanilla/javascript programming/javascript/vanilla/intl-listformat