Formatting Currency using Javascripts Internationalization API

Javascript has a surprisingly neat (and built-in) way to format currency values using it’s Internationalization API Intl.

It’s the sort of thing thats often forgotten when ‘internatinalising’ sites as the variation of display for numeric values isn’t widely appreciated. But using the Internationalization API it’s really simple to display numbers in the preferred format of your users.

To format a currency output, use Intl.NumberFormat:

const currencyFormatter = new Intl.NumberFormat('de', {
  style: 'currency',
  currency: 'EUR',
})

currencyFormatter.format(100) 
// -> "100,00 €"

const currencyFormatter = new Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'EUR',
})

currencyFormatter.format(100) 
// -> "€100.00"

It’s a great API but does have some caveats, particularly if you use english formatting on certain currencies. For example, the Swedish currency Krona. With the Swedish sv locale in place the output will be 100,00 kr, so you might expect the en output to be 100.00 kr, however it displays SEK 100.00, which seems to be a fallback.

There is an additional argument currencyDisplay which in theory will enforce the output style, but even with it set to "symbol" (which is actually the default) in this case it doesn’t matter.