Never use a number or currency formatting library again!

Contents

1. Intro
2. Number Format
3. Currency Format
4. Units Format
5. Summary

Intro

Reducing dependencies that you ship with your frontend is always a good thing!
If you are using a number or currency formatting library, check it out on Bundlephobia and see how much time and bytes it adds to your application.

All this can be done with a new cross browser API! Intl.NumberFormat

Number Format

Formatting numbers is hard! Adding thousand separators, decimal places and so on.
Never mind internationalization too! Some languages use comma separators, some dot separators and thats only the start!

Enter Intl.NumberFormat.

The Intl API has some really helpful methods but we are going to focus on number formatting in this blog.

Let's jump straight in with an example:

const numberFormat = new Intl.NumberFormat('ru-RU');console.log(numberFormat.format(654321.987));//  "654 321,987"

Here we have specified the locale to be russian, however if you use the constructor without passing a locale it will auto detect based on the users browser.
Meaning it will change depending on the users preference, localising to your users:

const numberFormat = new Intl.NumberFormat();console.log(numberFormat.format(654321.987));

This is supported across all browsers now, including Safari!

But we can take it even further...

Currency Format

Not only can we format numbers this way, but we can also support currencies too.
This is relatively new support across browsers, so what out of Safari versions your users are using.

This works great for formatting numbers:

const number = 123456.789;console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));// expected output: "123.456,79 "

There is support for every currency I could think of.

Remember this won't do any currency conversions between them, only format how they are displayed.

Units Format

I didn't know this until researching this blog. But you can even format units!!
This isn't yet supported on Safari, so again check the browser compatibility.

new Intl.NumberFormat('en-US', {    style: 'unit',     unit: 'liter',     unitDisplay: 'long'}).format(amount);//  '3,500 liters'

There are an enormous list of supported units, including speeds and loads more.
It even allows you to format percentages, which I've always found a pain.

new Intl.NumberFormat("en-US", {    style: "percent",    signDisplay: "exceptZero"}).format(0.55);//  '+55%'

Summary

The Intl.NumberFormat is a really powerful tool in the arsenal of web developers!

No need to add an additional dependencies to your application. Increase speed and international support with the Intl API!

Happy Building!