javascriptlocalizationicucldr

Sorting-friendly language names with Intl.DisplayNames

Is there a way to use Intl.DisplayNames to get sorting-friendly language names where the base language comes first?

const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
console.log(languageNames.of('en'));
console.log(languageNames.of('en-AU'));
console.log(languageNames.of('fr'));
console.log(languageNames.of('fr-CA'));

The above snippet returns:

English
Australian English
French
Canadian French

I'm looking for values formatted as documented in the CLDR Language/Locale Name Patterns page:

English
English (Australia)
French
French (Canada)

Some languages have alt="menu" variants as of CLDR 36, e.g. Chinese, Cantonese for yue (instead of the default Cantonese), but I'm not sure if these are exposed via JavaScript (and aren't defined for the languages in my example above, anyway).

I found a related ticket in the CLDR Jira: ICU-21549: Fix the API to support language menus

Solution

  • Setting the languageDisplay option to 'standard' produces the output you want:

    const languageNames = new Intl.DisplayNames(['en'], {
  type: 'language',
  languageDisplay: 'standard'
});
console.log(languageNames.of('en'));
console.log(languageNames.of('en-AU'));
console.log(languageNames.of('fr'));
console.log(languageNames.of('fr-CA'));

    I don't know if it's possible to access the menu variants through this API.