# Intl.DisplayNames

The `Intl.DisplayNames` object enables the consistent translation of language, region, and script display names. It allows you to get the localized name of a language, region, currency, etc., without maintaining a massive translation database yourself.

## 1. Basic Usage

The constructor takes two optional arguments: `locales` and `options`. The `of()` method returns the display name for a given code.

```javascript
const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });

console.log(regionNames.of('US')); // "United States"
console.log(regionNames.of('DE')); // "Germany"
console.log(regionNames.of('FR')); // "France"
```

## 2. Types

The `type` option is required and determines what kind of code you are providing.

### Language
```javascript
const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });

console.log(languageNames.of('fr')); // "French"
console.log(languageNames.of('zh-Hans')); // "Chinese (Simplified)"
```

### Region
```javascript
const regionNames = new Intl.DisplayNames(['es'], { type: 'region' });

console.log(regionNames.of('US')); // "Estados Unidos"
console.log(regionNames.of('JP')); // "Japón"
```

### Script
```javascript
const scriptNames = new Intl.DisplayNames(['en'], { type: 'script' });

console.log(scriptNames.of('Latn')); // "Latin"
console.log(scriptNames.of('Arab')); // "Arabic"
```

### Currency
```javascript
const currencyNames = new Intl.DisplayNames(['en'], { type: 'currency' });

console.log(currencyNames.of('USD')); // "US Dollar"
console.log(currencyNames.of('EUR')); // "Euro"
console.log(currencyNames.of('JPY')); // "Japanese Yen"
```

## 3. Styles

You can control the length of the name using the `style` option.

*   `long`: "United States" (default)
*   `short`: "US"
*   `narrow`: "US"

```javascript
const longNames = new Intl.DisplayNames(['en'], { type: 'region', style: 'long' });
const shortNames = new Intl.DisplayNames(['en'], { type: 'region', style: 'short' });

console.log(longNames.of('GB'));  // "United Kingdom"
console.log(shortNames.of('GB')); // "UK"
```

## 4. Fallback

The `fallback` option determines what happens if the code is unknown.
*   `code`: Returns the input code (default).
*   `none`: Returns `undefined`.

```javascript
const names = new Intl.DisplayNames(['en'], { type: 'region', fallback: 'code' });
console.log(names.of('XX')); // "XX"
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/intl-listformat]]