# New Intl API in JavaScript 🚀

The new `Intl` object is the namespace for the ECMAScript Internationalization API which provides language-sensitive string comparison, number formatting, and date and time formatting in the locale-specific format.

> Internationalization is the process of designing a product, application, or document content that is suitable for a global audience. It is a set of practices that allows a product to be adapted to different languages, cultures, and regions without engineering changes. The `Intl` object is a standard way to format data in the locale-specific format.

## Why It's Needed

For decades, to make an application accessible natively in each region with the support of local elements like currency, timezone, and language-specific content developers had to use third-party libraries. The new `Intl` API trying to address the issue with the support of a few new features.

JavaScript being, a global language, and it's used by people all over the world. The `Intl` object is a standard way to format data in the locale-specific format. Previously, it was achieved by third-party libraries to format data in the locale-specific format, and the different operations required many different third-party libraries resulting in a bloated web and higher bundle sizes.

Date formatting was a major pain in the neck for developers. Because of this developers had to use third-party libraries like [`moment.js`](https://momentjs.com/), [`date-fns`](https://date-fns.org/), [`luxon`](https://moment.github.io/luxon/#/), etc to format dates in the locale-specific format.

For formatting strings in the locale-specific format, developers had to use third-party client-side libraries like `i18next`, `react-intl` etc.

For formatting strings and numbers in the locale-specific format, developers had to use third-party libraries like [`numeral.js`](https://www.npmjs.com/package/numeral), [`accounting.js`](https://www.npmjs.com/package/accounting), [`cldr-compact-number`](https://www.npmjs.com/package/cldr-compact-number), etc.

But now with the new `Intl` object, developers can format strings, numbers, and dates in the locale-specific format without using third-party libraries and standardizing the process of these.

> The Intl API has excellent support for all major browsers except `IE11`. For IE11, you can use the [`Format.js Polyfil`](https://formatjs.io/docs/polyfills). 

> Each browser has a different implementation of the `Intl` object. So Output of the `Intl` object in different browsers might vary depending on the browser.


![can-i-use.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666734265555/2KtQ2xFGg.png align="left")

## Intl API

`Intl` Object in Node v19.0.0 

![Intl-Nodejs.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666793889869/kVpYgSCYT.png align="left")

`Intl` object in Chrome 107.0

![Intl-Browser.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666793925726/Ucrsm6JeN.png align="left")

The Intl API provides many constructor properties for various tasks. We'll explore a few of them in this article. Later I, probably will add other remaining constructors.

<br />


## Intl.Collator

Refrence: [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)

Constructor for collators, which are objects that enable language-sensitive string comparison.

### Syntax

```javascript
new Intl.Collator(locales, options);
```

`locales`: A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see

`options`: An object with some or all of the following properties:


```javascript
const initialOptions = {
  localeMatcher: 'best fit',
  usage: 'sort',
  sensitivity: 'variant',
  ignorePunctuation: true,
  numeric: true,
  caseFirst: 'upper',
};

const collator = (
  strOne,
  strTwo,
  language = 'en',
  options = initialOptions
) => {
  const collatorObject = new Intl.Collator(language, initialOptions);

  return collatorObject.compare(strOne, strTwo);
};

const log = console.log;

log(collator('a', 'a', 'en')); // 0

log(collator('a', 'A', 'en')); // 0

log(collator('a', 'b', 'en')); // -1

log(collator('b', 'a', 'en')); // 1

log(collator('100', '10', 'en')); // 1

log(collator('100', '1000', 'en')); // -1

['Z', 'a', 'z', 'ä'].sort((acc, cur) => collator(acc, cur, 'de', {})); // ['a', 'ä', 'Z', 'z']
```


![collator.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666734722200/pOuCGRo7i.png align="left")

## Intl.DateTimeFormat

Refrence: [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)

Constructor for objects that enable the language-sensitive date and time formatting.

### Syntax

```javascript
new Intl.DateTimeFormat(locales, options);
```

`locales`: A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see

`options`: An object with some or all of the following properties:

```javascript
const initialOptions = {
  localeMatcher: 'best fit',
  weekday: 'long',
  era: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZoneName: 'long',
};

const dateTimeFormat = (
  date = new Date(),
  language = 'en',
  options = initialOptions
) => {
  const dateTimeFormatObject = new Intl.DateTimeFormat(language, options);

  return dateTimeFormatObject.format(date);
};

const log = console.log;

log(dateTimeFormat(new Date(), 'en')); // Wednesday, October 26, 2022 Anno Domini at 2:23:13 AM India Standard Time

log(dateTimeFormat(new Date(), 'de')); // Mittwoch, 26. Oktober 2022 n. Chr. um 2:23:13 Indische Normalzeit

log(dateTimeFormat(new Date(), 'fr')); // mercredi 26 octobre 2022 après Jésus-Christ à 2:23:14 heure de l’Inde

log(dateTimeFormat(new Date(), 'ja')); // 西暦2022年10月26日水曜日 2時23分26秒 インド標準時

log(dateTimeFormat(new Date(), 'zh')); // '公元2022年10月26日星期三 印度时间 2:23:35'

log(dateTimeFormat(new Date(), 'en', { weekday: 'short' })); // Wed
```


![dateTimeFormat.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666734410103/lWXixlf4W.png align="left")


## Intl.RelativeTimeFormat

Refrence: [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)

Constructor for objects that enable language-sensitive relative time formatting.

### Syntax

```javascript
new Intl.RelativeTimeFormat(locales, options);
```

`locales` : A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see

`options`: An object with some or all of the following properties:

```javascript
const initialOptions = {
  localeMatcher: 'best fit',
  numeric: 'auto',
  style: 'long',
};

const relativeTimeFormat = (
  value = 0,
  unit = 'second',
  language = 'en',
  options = initialOptions
) => {
  const relativeTimeFormatObject = new Intl.RelativeTimeFormat(language, {
    ...options,
    value,
    unit,
  });

  return relativeTimeFormatObject.format(value, unit);
};

const log = console.log;

log(relativeTimeFormat(1));

log(relativeTimeFormat(0, 'month'));

log(relativeTimeFormat(-1, 'year'));

log(relativeTimeFormat(10, 'hour'));

log(relativeTimeFormat(5, 'day'));

log(relativeTimeFormat(1, 'week'));

log(relativeTimeFormat(1, 'month'));

log(relativeTimeFormat(1, 'day'));

log(relativeTimeFormat(-1, 'day'));
```


![relative-time-format.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666734455282/dEi21yRuW.png align="left")



## Intl.NumberFormat

Refrence: [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)

Constructor for objects that enable language-sensitive number formatting.

### Syntax

```javascript
new Intl.NumberFormat(locales, options);
```

`locales`: A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the locales argument, see

`options`: An object with some or all of the following properties:

> Note: The `style` property can be either `decimal` or `currency`. If `style` is `currency`, then the `currency` property must be provided as well.

> Note: The `currencyDisplay` property can be either `symbol` or `code`. If `currencyDisplay` is `symbol`, then the `currency` property must be provided as well.

> Note : The `notion` property can be either `standard` or `scientific`. If `notation` is `scientific`, then the `minimumSignificantDigits` and `maximumSignificantDigits` properties must be provided as well. after which we can achieve the following:

```javascript
const initialOptions = {
  localeMatcher: 'best fit',
  style: 'decimal',
  currency: 'USD',
  currencyDisplay: 'symbol',
  compactDisplay: 'short',
  useGrouping: true,
  minimumIntegerDigits: 1,
  minimumFractionDigits: 0,
  maximumFractionDigits: 3,
  minimumSignificantDigits: 1,
  maximumSignificantDigits: 21,
  notion: 'compact',
};

const numberFormat = (
  number = 0,
  language = 'en',
  options = initialOptions
) => {
  const numberFormatObject = new Intl.NumberFormat(language, options);

  return numberFormatObject.format(number);
};

const log = console.log;

const numberFormatOptions = {
  notation: 'compact',
  compactDisplay: 'short',
};

log(numberFormat(12343232356.789, 'en', numberFormatOptions)); // 12B

log(numberFormat(1000, 'en')); // 1,000

log(numberFormat(1000, 'de')); // 1.000

log(numberFormat(1000, 'in')); // 1.000

log(numberFormat(1000, 'fr')); // 1 000

log(numberFormat(1000, 'ja')); // 1,000

log(numberFormat(1000, 'zh')); // 1,000

log(numberFormat(1000, 'en', { style: 'currency', currency: 'EUR' })); // €1,000.00

log(numberFormat(1000, 'de', { style: 'currency', currency: 'EUR' })); // 1.000,00 €

log(numberFormat(1000, 'de', { style: 'currency', currency: 'INR' })); // 1.000,00 ₹

log(numberFormat(1000, 'fr', { style: 'currency', currency: 'EUR' })); // 1 000,00 €

log(numberFormat(1000, 'ja', { style: 'currency', currency: 'EUR' })); // €1,000.00

log(numberFormat(1000, 'zh', { style: 'currency', currency: 'EUR' })); // €1,000.00

log(numberFormat(1000, 'en', { style: 'percent' })); // 100,000%

log(numberFormat(1000, 'de', { style: 'percent' })); // 100.000%

log(numberFormat(1000, 'in', { style: 'percent' })); // 100.000%

log(numberFormat(1000, 'fr', { style: 'percent' })); // 100 000 %

log(numberFormat(1000, 'ja', { style: 'percent' })); // 100,000%

log(numberFormat(1000, 'zh', { style: 'percent' })); // 100,000%
```


![NumberFormat.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666734483541/UIBd4sf5a.png align="left")




## References

- [MDN Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)

- [MDN Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)

- [MDN Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)

- [MDN Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)

- [MDN Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)

- [MDN Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules)

- [MDN Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat)

- [MDN Intl.Locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)

- [MDN Intl.DisplayNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames)

- [MDN Intl.Segmenter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter)