Displaying currency made simple in JavaScript

Amit Merchant · January 12, 2022 ·

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’s en-US since we’re dealing with the American English
  • options - An object with the style and currency properties. In our case, it’s currency and USD respectively.

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 style is ‘currency’, a currency property 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)'

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?