DEV Community

Never use a number or currency formatting library again!

Jordan Finneran on April 19, 2021

Contents Intro Number Format Currency Format Units Format Summary Intro Reducing dependencies that you ship wit...
Collapse
 
fkhadra profile image
Fadi Khadra

Wish we had something similar for dates 🀣

Collapse
 
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.dev/blogs/5-github-e...

Collapse
 
jordanfinners profile image
Jordan Finneran

I've just checked and there is also this developer.mozilla.org/en-US/docs/W...

Which would do this for dates! πŸ˜€

Collapse
 
fkhadra profile image
Fadi Khadra

This is neat! πŸ‘Œ

Collapse
 
christophheinemann profile image
ChristophHeinemann

.toLocaleDateString

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

Collapse
 
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: caniuse.com/NumberFormat 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.

Collapse
 
n_develop profile image
Lars Richter

That looks pretty cool. I did not know about Intl.NumberFormat. Thanks a lot for this informative post. πŸ‘

Collapse
 
kwiat1990 profile image
Mateusz Kwiatkowski

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

Collapse
 
mrwolferinc profile image
mrwolferinc

Thank you! Your tip is very helpful.

Collapse
 
jpchreim profile image
Jean Pierre Chreim

Thanks for this amazing information and API. Keep up the hard work πŸ”₯ πŸ‘

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

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice article :)

Collapse
 
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 πŸ‘πŸ»

Collapse
 
christophheinemann profile image
ChristophHeinemann

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

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ

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

Collapse
 
jordanfinners profile image
Jordan Finneran

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

Collapse
 
filatovv profile image
Yuri Filatov

Thank you

Collapse
 
amjedidiah profile image
Jedidiah Amaraegbu

Really helpful
Thanks

Collapse
 
josee9988 profile image
Jose Gracia Berenguer

I didn't know about this one, thanks!

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

Collapse
 
jordanfinners profile image
Jordan Finneran

Would love to hear the reasons πŸ‘€πŸ˜‚

Collapse
 
christophheinemann profile image
ChristophHeinemann

Or you just call .toLocaleString on Number it supports the whole Intl formatting options...