Intl.DisplayNames
Intl.DisplayNames returns localized names for languages, regions, scripts, and currencies. It is useful when the UI should show human-readable labels instead of raw codes.
Overview
Intl.DisplayNames returns localized names for languages, regions, scripts, and currencies. It is useful when the UI should show human-readable labels instead of raw codes.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 81 | 81 | 86 | 14.1 | 81 | 14.5 | |
| Built-in object | ||||||
| The Intl.DisplayNames() constructor creates Intl.DisplayNames objects. | 81 | 81 | 86 | 14.1 | 81 | 14.5 |
| The of() method of Intl.DisplayNames instances receives a code and returns a string based on the locale and options provided when instantiating this Intl.DisplayNames object. | 81 | 81 | 86 | 14.1 | 81 | 14.5 |
| The resolvedOptions() method of Intl.DisplayNames instances returns a new object with properties reflecting the options computed during initialization of this DisplayNames object. | 81 | 81 | 86 | 14.1 | 81 | 14.5 |
| The Intl.DisplayNames.supportedLocalesOf() static method returns an array containing those of the provided locales that are supported in display names without having to fall back to the runtime's default locale. | 81 | 81 | 86 | 14.1 | 81 | 14.5 |
Syntax
const names = new Intl.DisplayNames(['ja'], { type: 'language' });
names.of('en'); // 'English'
names.of('zh-Hans'); // 'Chinese (Simplified)'
const regions = new Intl.DisplayNames(['ja'], { type: 'region' });
regions.of('US'); // 'United States'Live demo
Use cases
Language and region pickers
Render locale codes as user-friendly names in the active interface language.
Currency labels
Display standardized currency names in a localized format instead of showing only ISO codes.
Cautions
- The output depends on locale data support, so not every environment returns identical labels.
- DisplayNames supplies labels only; it does not handle sorting, fallback strategy, or full locale negotiation on its own.
Accessibility
- Localized labels are easier to understand than raw codes, especially in forms and settings where users must make quick choices.
Related links
Powered by web-features