Intl Number and its uses
Published: 2021-08-17 17:10:58

Intl API has been a good new addition on web for internationalisation. We are going to looking into some of the cool examples. Let’s start first with number

Number can be categorised in four and it cover extensively `decimal`, `percent`, `unit` and `currency`. We are going to look into example of each one.

### Decimal

It will format the style in Indian like how we format thousand/lakh/crore.

```javascript
(1134554.1234).toLocaleString('en-IN', {
  style: 'decimal',
})

// 11,34,554.123
```

Format to show the number in Devanagari, a numbering system that was used in India, and still used by some people.

```javascript
(1134554.1234).toLocaleString('en-IN', {
  style: 'decimal', 
  numberingSystem: 'deva'
})

// ११,३४,५५४.१२३
```

The Intl support several numbering system like following show in arabic.

```javascript
(1134554.1234).toLocaleString('en-IN', {
  style: 'decimal', 
  numberingSystem: 'arab'
})

// ١١٬٣٤٬٥٥٤٫١٢٣
```

### Percent
It has simplistic use, format the number in passed locale and include percent, like following for Spanish.

```javascript
(1134554.1234).toLocaleString('es', {
  style: 'percent',
})

// 113.455.412 %
```

This has support of numbering multiple numbering system also, like following for arabic.

```javascript
(1134554.1234).toLocaleString('en-GBP', {
  style: 'percent', 
  numberingSystem: 'arab'
})

// ١١٣٬٤٥٥٬٤١٢٪؜؜
```

### Currency

It has been long due for formatting any amount in its local currency.

It will format the amount 11 to show with EUR sign.

```javascript
(11).toLocaleString('es', {
  style: 'currency',
  currency: 'EUR',
})

// 11,00 €
```

It is going to show the amount with rupee sign.

```javascript
(11).toLocaleString('en-IN', {
  style: 'currency',
  currency: 'INR'
})

// ₹11.00
```

### Unit
Its is pretty extensive and has wide use case let go by example

```javascript
(11).toLocaleString('en-IN', {
  style: 'unit',
  unit: 'pound', 
  unitDisplay: 'long'
})

// 11 Pounds
```

The result will be `11 Pound` but you can change unitDisplay like ‘long’, ‘short’ and ‘narrow’

```javascript
Long - 11 Pounds
Short - 11 lb
Narrow - 11lb
```

You can customise to show unit, also check [this link](https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier) for the list of unit that it accept

```javascript
(1024).toLocaleString('en-IN', {
  style: 'unit',
  unit: 'megabyte-per-gigabyte',
  unitDisplay: 'narrow'
})

// 1,024MB/GB
```

Intl offer `per` to concatenate any unit to show like `1,024MB/GB`. For example `fahrenheit-per-degree`, `hour-per-kilometer` you can build more using two different or same unit.

### Useful property

#### minimumIntegerDigits 
You can pass minimum number of integer for example

```javascript
(123).toLocaleString('en-IN', {
  style: 'decimal',
  minimumIntegerDigits: '10'
})

// 0,00,00,00,123
```
its going to show minimum 10 digit before fraction even if it has to include several zero

#### minimumFractionDigits
```javascript
(123).toLocaleString('en-IN', {
  style: 'decimal',
  minimumFractionDigits: '10'
})

// 123.0000000000
```

It will show the minimum fraction in even if has to include zero. It also has limit that you can’t include more than 20.

#### maximumFractionDigits
```javascript
(3.14159).toLocaleString('en-IN', {
  style: 'decimal',
  maximumFractionDigits: '2'
})

// 3.14
```

It will include only minimum number defined like we use in `toFixed()`

Thanks for reading this so far.