Displaying currency made simple in JavaScript

January 12, 2022 · 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.

• The Intl.NumberFormat constructor
  • Formatting the Currency
  • Displaying Currency Name
  • Currency with Parentheses

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)'

Previous: Quickly switch to new branch with unstaged changes in Git Next: Increasing Productivity with Omni — The Alfred of Chrome

» Share: Twitter, Facebook, Hacker News

Like this article? Consider leaving a

Tip

👋 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.

Become a Sponsor Join my newsletter

Comments?

More on similar topics

Browse articles by category

All the ways to turn an array into an object in JavaScript

JavaScript Playground in Your Browser

A better setTimeout() in JavaScript

Replace Accented Characters with their Plain English Counterparts in JavaScript