Intl Formatting Numbers in Javascript

mandrewdarts

M. Andrew Darts

Posted on December 12, 2019

Intl Formatting Numbers in Javascript

Formatting numbers is key to many applications. This may seem like a small task to an experienced developer, but the thought of having to write these for every application I start is disheartening. Well, anyways, enough with my rant. Let's look for a library to knock this out so we can move on. We need a solution that handles percentages, currency, and many languages. Hmm? What if there was an API in the browser?

Using Intl.NumberFormat

The Intl.NumberFormat API can handle percentages, decimals, currencies and locale. Let's check it out.

Adding commas where needed

Intl.NumberFormat().format(40000); // 40,000
Enter fullscreen mode Exit fullscreen mode

Need support for Spanish?

Intl.NumberFormat('es').format(40000); // 40.000
Enter fullscreen mode Exit fullscreen mode

Currency is a tricky one.

Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
}).format(40000); // $40,000.00
Enter fullscreen mode Exit fullscreen mode

Currency Again, Spanish?

Intl.NumberFormat("es", {
  style: "currency",
  currency: "USD"
}).format(40000); // 40.000,00 US$
Enter fullscreen mode Exit fullscreen mode

Other Examples

I'll keep this short and sweet. I encourage you, next time you reach for a library to solve a problem, look to the platform first!

References

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
Browser Support: https://caniuse.com/#search=NumberFormat

💖 💪 🙅 🚩
mandrewdarts
M. Andrew Darts

Posted on December 12, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Intl Formatting Numbers in Javascript
javascript Intl Formatting Numbers in Javascript

December 12, 2019