Currency formatting on JavaScript ES6

const money = 10000;

new Intl.NumberFormat('jp-JP', {
  style: 'currency',
  currency: 'JPY',
}).format(money); // 'JP¥ 10,000'

new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
}).format(money); // '€ 10,000.00'

Guide for the parameter#

Let's talk about the parameters. It's made up of the locales and the options object.

new Intl.NumberFormat([locales[, options]])

Parameter: Locales#

First, you have the locales, this is the language and region settings. It is made up of language code and the country code.

language code + country code

//ex-1
en-CA
en = English (language)
CA = Canada (country)

//ex-2
de-DE
de = German (language)
DE = Germany (country)
 

list of the Language code

list of the Country code

Parameter: Options#

There are tons of options, but let's just talk about the two that we're using: styles, and currency.

Options: Style

The style is the easy part. This is the style for your number formatting. Since this is a currency blog, our choice would be currency. The 3 possible values are:

1. decimal (plain number formatting, the default)
2. currency (currency formatting, what we're using)
3. percent (percent formatting)

const money = 100;

new Intl.NumberFormat('en-CAD', { currency: 'CAD'
  style: 'decimal',
}).format(money); // '100'

new Intl.NumberFormat('en-CAD', { currency: 'CAD'
  style: 'currency',
}).format(money); // 'CA$ 100.00'

new Intl.NumberFormat('en-CAD', { currency: 'CAD'
  style: 'percent',
}).format(money); // '10,000%'

Options: Currency

Obviously, there are tons of currency options. You can see the full list here

Here are some examples:

1. CAD (Canadian dollar)
2. USD (US dollar)
3. EUR (Euro)
4. CNY (Chinese RMB)

Resources#

1. MDN Web Docs - Intl.NumberFormat
2. w3schools: Language Codes
3. w3schools: Country Codes
4. Current currency & funds code list

Enjoyed this post?#

Check out some of my other articles:

1. Understanding pointer in golang
2. How To Connect Multiple Database With Node JS and Prisma
3. Race condition on state react.js