# How to Format Currency in ES6
You can now use the NumberFormat instance to format any number into a currency value.
const money = 💰;
// Old Way
money.toLocaleString('en-US',
{style: 'currency', currency: 'USD'}
); // '$100.00'
// ✅ ES6 Way
new Intl.NumberFormat('en-US',
{ style: 'currency', currency: 'USD' }
).format(money); // '$100.00'
# More Currency Conversion
const money = 10000;
new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
}).format(money); // '€ 10,000.00'
new Intl.NumberFormat('jp-JP', {
style: 'currency',
currency: 'JPY',
}).format(money); // 'JP¥ 10,000'
new Intl.NumberFormat('zh-CN', {
style: 'currency',
currency: 'CNY',
}).format(money); // 'CN¥ 10,000.00'
# Understanding the Parameter
Let's talk about the parameters. It's made up of the locales
and the options
object.
new Intl.NumberFormat([locales[, options]])
# A. 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
Let's take a look at some examples:
Ex 1:
en-CA
en = English (language)
CA = Canada (country)
Ex 2:
de-DE
de = German (language)
DE = Germany (country)
Some More example
- en-IN (English India)
- fr-CA (French Canada)
- ja-JP (Japanese Japan)
Here is a list of the Language code: w3schools: Language Codes
Here is a list of the Country code: w3schools: Country Codes
# B. Parameter: Options
There are tons of options, but let's just talk the two that we're using: styles
, 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:
- decimal (plain number formatting, the default)
- currency (currency formatting, what we're using)
- 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: Current currency & funds code list
Here are some examples:
- CAD (Canadian dollar)
- USD (US dollar)
- EUR (Euro)
- CNY (Chinese RMB)