How to format numbers as currency strings

I was working on a project that has to display currency in the UI for different parts of the world.

Here are a couple solutions that helped me:

Okay solution: use Number.toFixed(2)

This solution is okay if the currency you’re using has 2 decimal places. Not all currencies have 2 decimal places.

(2500).toFixed(2) // '2500.00'

// Or

Number(2500).toFixed(2) // '2500.00'

// No good
2500.toFixed(2) // Uncaught SyntaxError: Invalid or unexpected token

All Number.toFixed(2) is just convert a number into a string with 2 decimal places. You can also see in the example above that you’ll need to wrap the integer with the Number constructor or parenthesis.

Let’s look at an example with a lot of decimals places.

(2500.13602).toFixed(2) // '2500.14'

Number.toFixed(2)will trim after the second decimal place and round to the nearest hundredth.

Now to add a currency, I would just concatenate the string with the currency symbol.

`$${(2500).toFixed(2)}` // '$2500.00'

This is an okay solution, but not optimal. You can also see that you’ll need to add the comma (,) manually.

Let’s look at a solution that is better!

Best solution: Intl.NumberFormat()

All modern browsers support JavaScripts native Intl API–which stands for Internationalization API.

We can use this API to create currency output strings. Here’s an example!

const { format } = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
});

Intl.NumberFormat() accepts 2 arguments. The first argument is the locale, and the second argument is an object with other options that you can set.

Since I want to create currency string outputs, I will set the style as currency and the currency parameter as the desired currency output.

Once you’ve initiated the new Int.NumberFormat() you will be given access to a function called format() which is where you will enter your integer value in to get the currency string.

const { format } = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
});

// Positive number
format(2500) // '$2,500.00'

// Negative number
format(-2500) // '-$2,500.00'

// Multiple decimal places
format(2500.1356) // '$2,500.14'

Extra: Get locale dynamically

You can use the navigator.language global variable to get a dynamic locale.

new Intl.NumberFormat(navigator.language, opts);

I like to tweet about JavaScript and post helpful code snippets. Follow me there if you would like some too!