Intl.DisplayNames() constructor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

The Intl.DisplayNames() constructor creates Intl.DisplayNames objects.

Try it

const regionNamesInEnglish = new Intl.DisplayNames(["en"], { type: "region" });
const regionNamesInTraditionalChinese = new Intl.DisplayNames(["zh-Hant"], {
  type: "region",
});

console.log(regionNamesInEnglish.of("US"));
// Expected output: "United States"

console.log(regionNamesInTraditionalChinese.of("US"));
// Expected output: "美國"

Syntax

js
new Intl.DisplayNames(locales, options)

Note: Intl.DisplayNames() can only be constructed with new. Attempting to call it without new throws a TypeError.

Parameters

locales

A string with a BCP 47 language tag or an Intl.Locale instance, or an array of such locale identifiers. The runtime's default locale is used when undefined is passed or when none of the specified locale identifiers is supported. For the general form and interpretation of the locales argument, see the parameter description on the Intl main page.

options

An object containing the following properties, in the order they are retrieved:

localeMatcher Optional

The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". For information about this option, see Locale identification and negotiation.

style Optional

The formatting style to use. Possible values are "narrow", "short", and "long"; the default is "long".

type

The type of display names to return from of(). Possible values are "language", "region", "script", "currency", "calendar", and "dateTimeField".

fallback Optional

What to return from of() if the input is structurally valid but there's no matching display name. Possible values are:

"code" (default)

Return the input code itself.

"none"

Return undefined.

languageDisplay Optional

How language names should be displayed. Only usable along with type: "language". Possible values are:

"dialect" (default)

Display special regional dialects using their own name. E.g. "nl-BE" will be displayed as "Flemish".

"standard"

Display all languages using standard format. E.g. "nl-BE" will be displayed as "Dutch (Belgium)".

Exceptions

TypeError

Thrown if options.type is not provided.

RangeError

Thrown if locales or options contain invalid values.

Examples

Basic usage

In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.

js
console.log(new Intl.DisplayNames([], { type: "language" }).of("US"));
// 'us'

Using type dateTimeField

Example using dateTimeField as a type option, will return the localized date time names strings.

js
const dn = new Intl.DisplayNames("pt", { type: "dateTimeField" });
console.log(dn.of("era")); // 'era'
console.log(dn.of("year")); // 'ano'
console.log(dn.of("month")); // 'mês'
console.log(dn.of("quarter")); // 'trimestre'
console.log(dn.of("weekOfYear")); // 'semana'
console.log(dn.of("weekday")); // 'dia da semana'
console.log(dn.of("dayPeriod")); // 'AM/PM'
console.log(dn.of("day")); // 'dia'
console.log(dn.of("hour")); // 'hora'
console.log(dn.of("minute")); // 'minuto'
console.log(dn.of("second")); // 'segundo'

Using type calendar

Example using calendar as a type option, will return the localized calendar names strings.

js
const dn = new Intl.DisplayNames("en", { type: "calendar" });
console.log(dn.of("roc")); // 'Minguo Calendar'
console.log(dn.of("gregory")); // 'Gregorian Calendar'
console.log(dn.of("chinese")); // 'Chinese Calendar'

Using type language with languageDisplay

Example using language as a type with languageDisplay options.

js
// Using `dialect` option
const dnDialect = new Intl.DisplayNames("en", {
  type: "language",
  languageDisplay: "dialect",
});
console.log(dnDialect.of("en-GB")); // 'British English'

// Using `standard` option
const dnStd = new Intl.DisplayNames("en", {
  type: "language",
  languageDisplay: "standard",
});
console.log(dnStd.of("en-GB")); // 'English (United Kingdom)'

Specifications

Specification
ECMAScript® 2027 Internationalization API Specification
# sec-intl-displaynames-constructor

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Bun
Deno
Node.js
DisplayNames() constructor
Chrome – Full support
Chrome 81 (Release date: 2020-04-07)
footnote Full support
Edge – Full support
Edge 81 (Release date: 2020-04-13)
footnote Full support
Firefox – Full support
Firefox 86 (Release date: 2021-02-23)
footnote Full support
Opera – Full support
Opera 68 (Release date: 2020-04-22)
footnote Full support
Safari – Full support
Safari 14.1 (Release date: 2021-04-26)
footnote Full support
Chrome Android – Full support
Chrome Android 81 (Release date: 2020-04-07)
footnote Full support
Firefox for Android – Full support
Firefox for Android 86 (Release date: 2021-02-23)
footnote Full support
Opera Android – Full support
Opera Android 58 (Release date: 2020-05-13)
footnote Full support
Safari on iOS – Full support
Safari on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Samsung Internet – Full support
Samsung Internet 13 (Release date: 2020-12-02)
footnote Full support
WebView Android – Full support
WebView Android 81 (Release date: 2020-04-07)
footnote Full support
WebView on iOS – Full support
WebView on iOS 14.5 (Release date: 2021-04-26)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1.8 (Release date: 2021-03-02)
footnote Full support
Node.js – Full support
Node.js 14 (Release date: 2020-04-21)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also