How To Format Price With Currency In Javascript

In this article we’re going to explore Javascript Intl API INTL.FormatNumber and see how it can be used in order to format numbers and prices with/without decimal points and locale awareness.

Introduction

The Intl.NumberFormat object enables language-sensitive number formatting.

The Intl.NumberFormat object provides a powerful functionalities that helps in formatting numbers with currencies to different languages/locales, as well it has other options we can use like setting the number of the decimal points to be specific to a number we provide. Let’s dig into the examples to understand more about it.

Examples

Basic usage:

const number = 12345;
console.log(new Intl.NumberFormat().format(number));

In basic usage of Intl.NumberFormat().format() without specifying the locale or any other option parameter, A formatted string will be returned following the browser default locale, for example executing the above code would results in 12,345 if the locale is en-US.

---

Using Locales:

The following code sample shows a different examples of localized number formats.

In order to get the format of the language used in the user interface of your application, make sure to specify that language

const number = 123456.789;

// German uses comma as decimal separator and period for thousands
console.log(new Intl.NumberFormat('de-DE').format(number));
// → 123.456,789

// Arabic in most Arabic speaking countries uses real Arabic digits
console.log(new Intl.NumberFormat('ar-SY').format(number));
// → ١٢٣٤٥٦٫٧٨٩

// India uses thousands/lakh/crore separators
console.log(new Intl.NumberFormat('en-IN').format(number));
// → 1,23,456.789

// the nu extension key requests a numbering system, e.g. Chinese decimal
console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number));
// → 一二三,四五六.七八九

Sometimes the requested language format might not be supported in this case make sure to pass a fallback language locale as a fallback option, For example:

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
console.log(new Intl.NumberFormat(['ban', 'id']).format(number));
// → 123.456,789

---

Using Options:

The formatted numbers can be customized using the options argument.

For example to format a price in javascript, we can use the following options:

const number = 123456.789;

// request a currency format
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// → ￥123,457

In case we need to set a limit for the significant digits, we can specify that using maximumSignificantDigits, for example:

const number = 123456.789;

// request a currency format with limits on significant digits
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumSignificantDigits: 2 }).format(number));

// → $120,000

Another options can be used to format units as well, for example:

// Formatting with units
console.log(new Intl.NumberFormat('pt-PT',  {
  style: 'unit',
  unit: 'kilometer-per-hour'
}).format(50));
// → 50 km/h

console.log((16).toLocaleString('en-GB', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long',
}));
// → 16 litres

For more options and details you can checkout this page.

That’s it for How To Format Price With Currency In Javascript.

As always, Happy coding!!

Photo from Unsplash.

---

Related Posts