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