Format Numbers as Currencies Using Javascript Intl API

Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

Numbers are another piece of information that have different ways to be formatted based on the different languages that users may use. One example of this is to display a value in different currencies.

Currencies have not only different symbols but also different ways to punctuate or accommodate the numbers on them.

Javascript offers a way to handle this simply by just defining the language (locale) and the currency symbol you want to use. This API is Intl.NumberFormat

Matías Hernández: [0:00] How many times you needed to display a number as currency? How can you accomplish this? You can't just add the currency symbol to the mix, right? The Intl API offers you a solution by exposing the NumberFormat constructor. Let's see how this works. [0:21] Let's create a function that accepts a currency and locale arguments. This function will return a formatter that takes the locale argument and define a set of options, the style to be currency and currency property.

[0:41] Create a variable to represent the dollar amount. Use the formatter with the corresponding currency symbol as USD. Let's console.log the value, and you can see that the amount is represented correctly as dollars.

[0:58] Let's do the same with another currency. Let's try the pound. Get the formatter and set the currency symbol to be GBP. Console.log this variable and see the same value, but with a different representation. Let's try once more, but with the dinar, which symbol is DZD.

[1:24] This constructor also accepts a set of options. For example, the minimumFractionDigits that helps you to define how many numbers will be displayed at the right side of the value. There are many other formatting options available to this constructor that helps you to pick the exact representation you want.

[1:49] In case that your currency cannot be correctly displayed, the formatter object gives you access to another method named formatToParts. This method takes the value you want to format and returns an array of objects with the different parts of the currency string to be used as you need.

[2:14] In summary, the NumberFormat constructor from the Intl API gives you the power to change the way a number is represented in the screen by using the different options like the style option that defines if you want to display this as a number or a currency.

egghead
egghead
~ 3 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today