Internationalised Number and Currency Formatting With Vanilla JavaScript

JavaScript has some super built in internationalisation features and Intl.NumberFormat is the one to use for displaying numbers and prices.

The formatting options

Intl.NumberFormat allows you to format numbers into four different styles.

• currency for currencies
• decimal for formatting decimals (this is the default)
• percent for formatting percentages
• unit for formatting units (currently only supported in Chrome)

Currency formatting

For formatting currency you use the Intl.NumberFormat constructor. Just pass in the BCP 47 language tag (e.g. en-GB for United Kingdom English), and the ISO 4217 currency code (E.g. EUR for Euro, USD for United States Dollars and GBP for British Pounds).

Currency example

Below is an example of formatting a number into British Pounds.

var price = 1245.99;
var priceFormattedUK = new Intl.NumberFormat(
    'en-GB', // BCP 47 language tag 
    { 
        style: 'currency', // we want a currency
        currency: 'GBP' // ISO 4217 currency code
    }
).format(price);
console.log(priceFormattedUK);
// output: £1,245.99

The output for above code includes the currency symbol, a comma to separate the thousand and a decimal point for the pence. Nice!

By default the currency symbol is outputted, however you can choose to display the name.

var price = 1245.99;
var priceFormattedUK = new Intl.NumberFormat(
    'en-GB', // BCP 47 language tag 
    { 
        style: 'currency', // we want a currency
        currency: 'GBP', // ISO 4217 currency code
        currencyDisplay: 'name'
    }
).format(price);
console.log(priceFormattedUK);
// output: 1,245.99 British pounds

Different currencies

Below is an example of formatting for different currencies, so you can see how the numbers are outputted different locales. For example, for the Japanese Yen the decimal value is not outputted and for Euros a dot is used for numbers over a thousand and a comma is used for the decimal, which is the opposite of the United States Dollars.

Decimal formatting

Decimal is the default for number formatting and as you might expect, it formats numbers into decimals.

Percent formatting

Percentage formatting formats numbers into percentages. Interestingly in the example below, the German percentage format has a space between the number and the percent symbol.

Unit formatting

Unit formatting is currently only supported in Chrome, so is not particularly useful at the moment. However, this could be a cool option for certain types of websites in the future.

Default locale

If you don’t supply a locale to Intl.NumberFormat, it uses a matching algorithm to try to match it to what it thinks your locale is. However, with currency it seems to not display a symbol if you don’t specify a value for locale.

Browser support

Browser support for Intl.NumberFormat for currency, decimals and percentage is pretty good, with all modern browsers supporting it and even IE11. See CanIUse for full list.

However, the unit formatting browser support has a way to go before you can use it in production.