JavaScript Format Currency (intl.numberformat)

In JavaScript, the Intl.NumberFormat() method is used to specify a currency we want a number to represent. The method is a constructor that can be used to format currency in its style property. 

This article states how we use the Intl.NumberFormat() to achieve this, as well as show some example code.

Breaking Down the Constructor and Its Parameters

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

Because Intl.NumberFormat() is a constructor, it will be preceded by JavaScript’s “new” keyword to create an object that can achieve specialized number formatting.

The constructor takes two optional parameters, “locales” and “options”. Locales will hold a string with the internet’s Best Current Practices (BCP) for language tags, or currently, BCP 47. For example, if we wanted American English, we would use the BCP 47 language tag of “en-US”, if we wanted Brazilian Portuguese, we would use “pt-BR”. 

Options has 17 different properties it can hold, but in this article, we will focus on just three. We also focus on style, which we can utilize currency with, CurrencyDisplay, and CurrencySign.

Example Code

const money = 85000.50
 
// For Brazilian Reals
console.log(new Intl.NumberFormat('pr-BR', {style: 'currency', currency: 'BRL'}).format(money))
// outputs R$85,000.50
 
// For USD
console.log(new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(money))
// outputs $85,000.50
 
// For Japanese Yen
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
// outputs ¥85,001

Some things to notice from our example code above is that we’ve used the format() method to pass in our money variable. We did so after we’ve created the new object, which is being used to format our currency to our preferences, which are being passed in as parameters.

Notice how we not only get the real symbol in our output, but we also get the right format for the currencies. With Japanese Yen, the change in this example was rounded up purposefully as it does not observe minor units.

CurrencyDisplay and CurrencySign

Two other common properties we can hold under the options parameter for currency are CurrencyDisplay and CurrencySign.

CurrencyDisplay will display the currency in different formatting using values such as symbol, narrowSymbol, code, and name.

let money = 85000.50;
 
const symbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(money);
 
const narrowSymbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(money);
 
const code = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(money);
 
const name = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(money);
 
 
console.log(symbol) 
// $85,000.50
console.log(narrowSymbol)
// $85,000.50 rather than US$85,000.50
console.log(code)
// USD 85,000.50
console.log(name)
// 85,000.50 US dollars

CurrencySign will wrap a number in parentheses instead of appending the minus sign. This is used for and with “accounting”, so we must change the option to this as it is automatically defaulted to “standard”.

let money = -8500.50;
 
const accounting = new Intl.NumberFormat('en-USD', {
  style: 'currency', 
  currency: 'USD',
  currencySign: 'accounting' 
}).format(money);
 
console.log(accounting)
// ($8,500.50)

Conclusion

The Intl.NumberFormat() method is a constructor used to, among other things, format currency in its style property. We can use it in conjunction with format() to display currency to our liking.