Numbers, Dates, Intl & Timers | Internationalizing Numbers

In the last lecture, we formatted dates using the Internationalization API. Let's now format regular numbers.

Let's start by creating a number.

script.js

const number = 6682484.27;

Just like dates, we still use the Intl namespace. But this time, we use the NumberFormat function. And we pass in a locale string, just like before.

script.js

new Intl.NumberFormat('fr-FR');

Now, on this formatter object, we can call the format method, in which we pass in the number we want to format. And this will return a string with the number formatted according to the locale.

script.js

console.log(new Intl.NumberFormat('fr-FR').format(number)); // 6 682 484,27
console.log(new Intl.NumberFormat('ar-SY').format(number)); // ٦٬٦٨٢٬٤٨٤٫٢٧

As we saw in the last lecture, we can also use the locale string from the browser.

script.js

console.log(new Intl.NumberFormat(navigator.language).format(number)); // 6,682,484.27

Also, we can pass in an options object as the second argument to the NumberFormat function just like we did with the DateTimeFormat function. Let's have a look at the options we can pass in.

script.js

const options = {
  style: 'unit',
  unit: 'mile-per-hour',};

console.log(new Intl.NumberFormat('en-US', options).format(number)); // 6,682,484.27 mph
console.log(new Intl.NumberFormat('fr-FR', options).format(number)); // 6 682 484,27 mi/h
console.log(new Intl.NumberFormat('de-DE', options).format(number)); // 6.682.484,27 mi/h

Let's try another unit value which is celsius for the temperature.

script.js

const options = {
  style: 'unit',
  unit: 'celsius',};

console.log(new Intl.NumberFormat('en-US', options).format(number)); // 6,682,484.27 °C
console.log(new Intl.NumberFormat('fr-FR', options).format(number)); // 6 682 484,27 °C
console.log(new Intl.NumberFormat('de-DE', options).format(number)); // 6.682.484,27 °C

Another value we can use for style is percent. Let's try that.

script.js

const options = {
  style: 'percent',
};

console.log(new Intl.NumberFormat('en-US', options).format(number)); // 668,248,427%
console.log(new Intl.NumberFormat('fr-FR', options).format(number)); // 668 248 427 %
console.log(new Intl.NumberFormat('de-DE', options).format(number)); // 668.248.427 %

The third value we can use for style is currency. Let's try that.

script.js

const options = {
  style: 'currency',
  currency: 'EUR',};

console.log(new Intl.NumberFormat('en-US', options).format(number)); // €6,682,484.27
console.log(new Intl.NumberFormat('fr-FR', options).format(number)); // 6 682 484,27 €
console.log(new Intl.NumberFormat('de-DE', options).format(number)); // 6.682.484,27 €

For currency, it is important to understand that we indeed have to set the currency maanually. Because, the currency is not detected by the locale.

Finally, we can also turn on or off the grouping separator. Let's try that.

script.js

const options = {
  style: 'currency',
  currency: 'EUR',
  useGrouping: false,};

console.log(new Intl.NumberFormat('en-US', options).format(number)); // €6682484.27
console.log(new Intl.NumberFormat('fr-FR', options).format(number)); // 6682484,27 €
console.log(new Intl.NumberFormat('de-DE', options).format(number)); // 6682484,27 €

You can see that the numbers are printed as it is without the separators.

To finish this lecture, there are tons of units we can use. You can find all the options configuration in the MDN documentation, and the full list of units on the Unicode website.

const - JS | lectureNumbers, Dates, Intl & Timers