Displaying currency made simple in JavaScript
Working with currencies is the use-case that you might find yourself stumbled upon more often than not. And one of the aspects of it is to display the currency on the frontend.
Currency is a complex topic and since there are various currencies out there, it becomes a lot harder to work with them.
Luckily, displaying currency is pretty darn simple if you’re working with JavaScript. I’m going to discuss all about it in this article.
Typically, when you incorporate currency in your application, all you may do is store the number associated with the currency and the actual currency code in let’s say a database.
So, if you want to save the user’s payment of $1500, you may store 1500 and USD in two different columns in your database.
And that’s the only two things you’ll need to display the user’s payment back to the frontend effectively.
The Intl.NumberFormat constructor
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and the date and time formatting. And it does so by providing several different methods.
One of these is the Intl.NumberFormat constructor which can be used to format the currency.
Formatting the Currency
So, if we want to format the user’s payment provided we have the number (1500) and the currency code (USD), we can do it like so.
const userPayment = 1500;
const formattedUserPayment = new Intl.NumberFormat(
'en-US',
{
style: 'currency',
currency: 'USD'
}
).format(userPayment);
console.log(formattedUserPayment);
// '$1,500.00'
As you can tell, the NumberFormat constructor accepts two arguments.
locales- A string with a BCP 47 language tag, or an array of such strings. In our case, it’sen-USsince we’re dealing with the American Englishoptions- An object with thestyleandcurrencyproperties. In our case, it’scurrencyandUSDrespectively.
After this, the format method will be called on the result returned from Intl.NumberFormat with the userPayment payment as its argument.
One thing to note here is, when the
styleis ‘currency’, acurrencyproperty must be provided.
And this all together will format the entire currency and give us our desired result.
Displaying Currency Name
Now, if you want to display the currency name explicitly, you can provide an additional property called currencyDisplay to the options like so.
const userPayment = 1500;
const formattedUserPayment = new Intl.NumberFormat(
'en-US',
{
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
}
).format(userPayment);
console.log(formattedUserPayment);
// '1,500.00 US dollars'
Currency with Parentheses
There is one more property called currencySign that can be provided to the options with ‘accounting’ as its value.
This will ensure that it will wrap the negative number with parentheses instead of appending a minus sign.
const userPayment = -1500;
const formattedUserPayment = new Intl.NumberFormat(
'en-US',
{
style: 'currency',
currency: 'USD',
currencySign: 'accounting'
}
).format(userPayment);
console.log(formattedUserPayment);
// '($1,500.00)'
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
