Using Intl.DisplayNames for Country Names in JavaScript

The Intl.DisplayNames API

The Intl.DisplayNames API is a built-in JavaScript feature that translates ISO codes into human-readable names in any supported language — without needing external libraries or translation files.

Basic Usage

// English country names
const enNames = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(enNames.of('US')); // "United States"
console.log(enNames.of('JP')); // "Japan"
console.log(enNames.of('DE')); // "Germany"

// Japanese country names
const jaNames = new Intl.DisplayNames(['ja'], { type: 'region' });
console.log(jaNames.of('US')); // "アメリカ合衆国"
console.log(jaNames.of('JP')); // "日本"
console.log(jaNames.of('DE')); // "ドイツ"

// French country names
const frNames = new Intl.DisplayNames(['fr'], { type: 'region' });
console.log(frNames.of('US')); // "États-Unis"
console.log(frNames.of('JP')); // "Japon"
console.log(frNames.of('DE')); // "Allemagne"

Display Styles

const longNames = new Intl.DisplayNames(['en'], {
  type: 'region',
  style: 'long'     // default
});
console.log(longNames.of('GB')); // "United Kingdom"

const shortNames = new Intl.DisplayNames(['en'], {
  type: 'region',
  style: 'short'
});
console.log(shortNames.of('GB')); // "UK"

const narrowNames = new Intl.DisplayNames(['en'], {
  type: 'region',
  style: 'narrow'
});
console.log(narrowNames.of('GB')); // "UK"

Building a Country Selector

function getCountryOptions(locale, countryCodes) {
  const displayNames = new Intl.DisplayNames([locale], { type: 'region' });

  return countryCodes
    .map(code => ({
      value: code,
      label: displayNames.of(code) || code,
    }))
    .sort((a, b) => a.label.localeCompare(b.label, locale));
}

const countries = getCountryOptions('en', ['US', 'GB', 'JP', 'DE', 'FR']);
// [
//   { value: "FR", label: "France" },
//   { value: "DE", label: "Germany" },
//   { value: "JP", label: "Japan" },
//   { value: "GB", label: "United Kingdom" },
//   { value: "US", label: "United States" },
// ]

Browser and Runtime Support

Runtime	Support
Chrome 81+	Full
Firefox 86+	Full
Safari 14.1+	Full
Node.js 12.0+	Full (with ICU data)
Edge 81+	Full
Deno	Full

Related Intl Types

Intl.DisplayNames supports more than just countries:

// Languages
new Intl.DisplayNames(['en'], { type: 'language' }).of('ja'); // "Japanese"

// Currencies
new Intl.DisplayNames(['en'], { type: 'currency' }).of('JPY'); // "Japanese Yen"

// Scripts
new Intl.DisplayNames(['en'], { type: 'script' }).of('Latn'); // "Latin"