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

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: