How to add currency symbol and formatting to a number in JavaScript

Currency formatting on the client side can be a little tricky. Imagine a scenario where we are getting the currency code and amount from API, and we need to find the currency symbol and apply formatting to the amount based on the current locale. Creating a service for internationalization (i18n) could serve our purpose, but that would be tedious. Here comes JavaScript’s Intl API to rescue. The NumberFormat property of this API can solve our problem of currency formatting. Let’s explore this property in detail.

Intl.NumberFormat

To start formatting, first, we need to create an instance of NumberFormat, then call the format() method on it and pass the number.

const formatter = new Intl.NumberFormat();
console.log(formatter.format(5000000)); // '5,000,000'

The format() method accepts both number and string inputs and returns a string output.

The Intl.NumberFormat() constructor takes two optional parameters, locale and options.

Locale

It’s the locale value based on which we want the number formatting. For example: en-US, en-IN, zh-CN, th-TH, etc. The number formatting can vary from locale to locale.

console.log(new Intl.NumberFormat('pt-BR').format(5000000));
// '5.000.000'
console.log(new Intl.NumberFormat('en-US').format(5000000));
// '5,000,000'
console.log(new Intl.NumberFormat("en-IN").format(5000000));
// '50,00,000'
console.log(new Intl.NumberFormat('fr-FR').format(5000000));
// '5 000 000'

options

It is a configuration object which we can use to apply some more customization to the formatting. We’ll be mainly discussing the properties that are used for currency formatting.

style

The default value for style is decimal. We set style to currency for currency formatting. If the style value is set to currency, we have to provide another property called currency.

currency

It is the currency code for which we want to show the currency symbol. For example: INR, USD, EUR, etc.

const usd = new Intl.NumberFormat('en-US', { 
  style: 'currency',
  currency: 'USD',
});
console.log(usd.format(5000)); // '$5,000.00'

const inr = new Intl.NumberFormat('en-IN', { 
  style: 'currency',
  currency: 'INR',
});
console.log(inr.format(5000)); // '₹5,000.00'

const eurInFrance = new Intl.NumberFormat('fr-FR', { 
  style: 'currency',
  currency: 'EUR',
});
console.log(eurInFrance.format(5000)); // '5 000,00 €'

const eurInUS = new Intl.NumberFormat('en-US', { 
  style: 'currency',
  currency: 'EUR',
});
console.log(eurInUS.format(5000)); // '€5,000.00'

currencyDisplay

This property decides how the currency would appear, like as a symbol, code, or name. It can have the following values.

symbol – shows a currency symbol (default value).
narrowSymbol – shows a narrow format symbol.
code – shows the currency code.
name – shows localized currency name.

let nf = new Intl.NumberFormat('en-UK', { 
  style: 'currency',
  currency: 'USD',
});
console.log(nf.format(50)); // 'US$50.00'

// currencyDisplay: 'narrowSymbol'
nf = new Intl.NumberFormat('en-UK', { 
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
});
console.log(nf.format(50)); // '$50.00'

// currencyDisplay: 'code'
nf = new Intl.NumberFormat('en-UK', { 
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});
console.log(nf.format(50)); // 'USD 50.00'

// currencyDisplay: 'name'
nf = new Intl.NumberFormat('en-US', { 
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(nf.format(50)); // '50.00 US dollars'

// with 'hi' locale
nf = new Intl.NumberFormat('hi', { 
  style: 'currency',
  currency: 'INR',
  currencyDisplay: 'name'
});
console.log(nf.format(50)); // '50.00 भारतीय रुपए'

The Number.toLocaleString() method

The toLocaleString() method present on the prototype of the Number object can also be used for currency formatting. It internally uses Intl.NumberFormat for formatting. It accepts the same set of parameters that NumberFormat does.

const number = 100;
let currency = number.toLocaleString('en-US', { 
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}); 
console.log(currency); // '$100.00'

currency = number.toLocaleString('fr-FR', { 
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});
console.log(currency); // '100,00 euros'

JS Curious