DEV Community

Jordan Finneran
Jordan Finneran

Posted on • Originally published at

Never use a number or currency formatting library again!


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


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');
// → "654 321,987"
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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 €"
Enter fullscreen mode Exit fullscreen mode

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'
// → '3,500 liters'
Enter fullscreen mode Exit fullscreen mode

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"
// → '+55%'
Enter fullscreen mode Exit fullscreen mode


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!

Top comments (24)

fkhadra profile image
Fadi Khadra

Wish we had something similar for dates 🤣

jordanfinners profile image
Jordan Finneran

It won't translate into other languages but this element from GitHub will help with common date display tasks

jordanfinners profile image
Jordan Finneran

I've just checked and there is also this

Which would do this for dates! 😀

fkhadra profile image
Fadi Khadra

This is neat! 👌

christophheinemann profile image


ianwijma profile image
Ian Wijma

I knew Intl was awesome, but man, looking at the docs of it, I see so many functions that I've written myself before.

christoslitras profile image
Christos Litras

It depends on the size and the importance of the project and what versions of browsers that project needs to keep supporting. If we have a project that thousands or millions of users use in a daily basis, then most likely we'll have to deal with old browsers that won't have built-in support for Intl.NumberFormat API.

In a perfect universe where all people would have browsers that would support latest features, that would be awesome; but if we ditch backward compatibility and don't deal with missing APIs, then we'll end up with user's frustration, countless hours of debugging dealing with such issues and users moving away to other apps/platforms that will be able to see the actual numbers and not errors or empty strings.

Also, making applications using a native feature if it's available and fallback to a library if the feature is not available, will create inconsistency regarding data formatting and presenting.

If we have statistics regarding the userbase and the browsers they're using, the team can make conclusions and decide which minimum browser versions the platform/app will support and always detect these features and if not available display messages to the users that they have obsolete browsers/platforms and they need to update.

PS: Never use floats to store currency values, always use integers to strore the prices as cents!
PS2: is always a nice way to check for features and browsers compatibility so we can have some clues of what we're going to deal with regarding obsolete but still used browsers/platforms.

n_develop profile image
Lars Richter

That looks pretty cool. I did not know about Intl.NumberFormat. Thanks a lot for this informative post. 👍

kwiat1990 profile image
Mateusz Kwiatkowski

It's so awesome! Thanks for the article :)

mrwolferinc profile image

Thank you! Your tip is very helpful.

jpchreim profile image
Jean Pierre Chreim

Thanks for this amazing information and API. Keep up the hard work 🔥 👏

scroung720 profile image
scroung720 • Edited

Oh my gosh. I almost cry hahahaha this is so good. I have spent months of my life writing code to solve multiple problems related to number rounding.

andrewbaisden profile image
Andrew Baisden

Nice article :)

mwrpwr profile image
Joseph Maurer

Hey Jordan, Awesome post! I deal with having to format stuff like this all of time at work so I'm going to give Intl.NumberFormat a try. Thanks for the tip 👍🏻

christophheinemann profile image

give the .toLocaleString function a chance... it's Intl shortkey

darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Cool. If only there was also an API to format date- OMG There is! :D

jordanfinners profile image
Jordan Finneran

Yesss! Just got to watch out for Safari on some of these still, unfortunately.

filatovv profile image
Yuri Filatov

Thank you

amjedidiah profile image
Jedidiah Amaraegbu

Really helpful

josee9988 profile image
Jose Gracia Berenguer

I didn't know about this one, thanks!

berns_churches profile image
Berns Fire Death

This is great until you work on legacy code which uses node 12 and you can't update because of other reasons.

jordanfinners profile image
Jordan Finneran

Would love to hear the reasons 👀😂