JS You Should Know: Intl.DisplayNames

JavaScript is growing more impressive by the day. Every time I look up it seems like native JS has a new built-in feature, rivaling any framework. Web components and shadow DOM to name a couple. Today, I’m talking about a new one I found that is pretty useful. This being Intl.DisplayNames.

Intl is a feature JS that provides language-sensitive string comparison, number formatting, and date and time formatting. The Intl object provides access to several constructors as well as functions common to the internationalization constructors and other language-sensitive functions.

For Intl.DisplayNames, this constructor provides consistent translation of language, region, and script display names. Let’s look at some examples!

const regionNamesInEnglish = new Intl.DisplayNames(
  ['en'], 
  { type: 'region' }
);
const regionNamesInFrench = new Intl.DisplayNames(
  ['fr'], 
  { type: 'region' }
);

regionNamesInEnglish.of('US');
// expected output: "United States"
regionNamesInEnglish.of('FR');
// expected output: "France"

regionNamesInFrench.of('US');
// expected output: "États-Unis"
regionNamesInFrench.of('FR');
// expected output: "France"

Polyfill available: https://formatjs.io/docs/polyfills/intl-displaynames