Intl Number and its uses

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.

(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.

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

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

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

(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.

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

// 113.455.412 %

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

(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.

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

// 11,00 €

It is going to show the amount with rupee sign.

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

// ₹11.00

Unit

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

(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’

Long - 11 Pounds
Short - 11 lb
Narrow - 11lb

You can customise to show unit, also check this link for the list of unit that it accept

(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

(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

(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

(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.