Home / Displaying data / Currency formatting in JavaScript

Currency formatting in JavaScript

March 28, 2022 0

Last updated: September 27, 2022.

A common need in JavaScript is to display numeric values as currency in a specified format.

Thankfully, there is a simple solution in JavaScript: the native ECMAScript Internationalization API (Intl).

Using the API, you can easily format a numeric values as a currency value according to a specified language and country standard.

From numeric value to currency value

Creating a formatter

Currency formatting via the Internationalization API is initiated by creating a new instance of the Intl.NumberFormat class and specifying two arguments.

The first argument is a string. This should contain a two-part language and country code (e.g. ‘de-DE‘ or ‘en-US‘). You can find a comprehensive list of these codes here.

The second argument is an object ({}). Within this, two values need to be set: style and currency.

The style property should always be set to currency (because Intl.NumberFormat has other uses, this needs to specified explicitly).

The value of the currency property should be set to the target currency (e.g. USD, EUR, GBP).

For example:

/* Creating a new instance of the Intl.NumberFormat class */

new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR' });

This creates a new object. We still need to save it in a variable for later use:

/* Saving result as an object for later use */

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

Applying the formatter

We can now use the object as a formatter.

We do so by using a method on the new object named format. Passing in a numeric value to this method will format it accordingly:

/* Applying the new object */

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

formattingObject.format(119.50); // €119.50
formattingObject.format(49.99); // €49.99
formattingObject.format(20.20); // €20.20

A simplified currency formatting function

Configuring a new object can be unwieldy, especially if formatting according to multiple language/country standards and currencies.

To make life easier, you can create a utility function that takes care of this. It only requires three values to be specified each time it is called:

/* Configuration and application in  a function */

function formatCurrency (code, currency, amount) {
    return new Intl.NumberFormat(code, 
    {   
        style: 'currency',
        currency: currency 
    }).format(amount);
}

formatCurrency('en-US', 'USD', 39.99) // $39.99
formatCurrency('it-IT', 'JPY', 39.99) // 40 JPY
formatCurrency('en-IN', 'EUR', 39.99) // €39.99

So you can use this utility function in your project to avoid having to specify a formatting object of the Intl.Number format each time.