Format Numbers as Currencies Using Javascript Intl API
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.