How to Format Number as Currency String in JavaScript

Introduction

Having to manually format a number as a currency string can be a tedious process. Even though this can oftentimes be done in a few lines of code, it's good practice to follow a standardized norm rather than hardcode it yourself, plus it's way easier for the developer writing the code.

In this tutorial, we'll take a look at how to format a currency string in JavaScript.

Formatting Strings as Currency with Locale

A locale is a set of parameters that specify anything on your computer that's region specific:

• Number format setting
• Character classification, case conversion settings
• Date-time format setting
• Currency format setting
• Paper size setting
• Weekday format/ first day of the week
• Units of measurement

Windows users know locale parameters as Region settings. On the other hand, Linux users might not know that you can use the locale command to inspect said parameters.

In JavaScript, the easiest and most popular way to format numbers as currency strings is via the Intl.NumberFormat() method. This approach lets you format numbers using custom locale parameters - and in this article, we'll focus on currencies.

The Intl.NumberFormat() constructor accepts two arguments, the first being a locale string, with which we define the locale we want to format to:

const price = 1470000.15;

let dollarUSLocale = Intl.NumberFormat('en-US');
let dollarIndianLocale = Intl.NumberFormat('en-IN');

console.log("US Locale output: " + dollarUSLocale.format(price));
console.log("Indian Locale output: " + dollarIndianLocale.format(price));

This outputs:

1,470,000.15
14,70,000.15

Here, we've got localized variants of the price, formatted as a simple number. Though, there are certain options we can also tweak to further customize this formatting process.

The second argument can be used to specify the options you want to apply while formatting. This is a JavaScript object that can contain, but is not limited to:

• style
• currency
• useGrouping
• maximumSignificantDigits

Let's take a look at these properties individually.

Style

The style field specifies the type of formatting you want to use. Possible values include:

• decimal - Decimal number formatting.
• currency - Currency formatting.
• unit - Metric or Imperial unit formatting.

In our scenario, we'll just be formatting to currency strings.

Currency

Using the currency field, you can specify which specific currency you want to format to, such as 'USD', 'CAD' or 'INR'.

Let's format our price into different currencies:

const price = 1470000.15;

// Format the price above to USD, INR, EUR using their locales.
let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});

let rupeeIndian = Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
});

let euroGerman = Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
});

console.log("Dollars: " + dollarUS.format(price));
// Dollars: $147,000,000.15

console.log("Rupees: " + rupeeIndian.format(price));
// Rupees: ₹14,70,000.15

console.log("Euros: " + euroEU.format(price));
// Euros: 1.470.000,15 €

Additional Options

The useGrouping field is a boolean field that enables you to group the number using commas (or periods, for some locales). By default, it is set to true, as we could've seen in the outputs above.

Let's turn it off:

let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: false,
}); 
// $1470000.15

The maximumSignificantDigits field allows you to set the number of significant digits for the price. This can be used to round your price variable based on the number of significant digits you have set.

Significant digits, in simplified terms, are the digits of a number's representation that carry any weight in terms of accuracy.

Ironically, the accuracy of a number is defined as the number of its significant digits.

Significant digits include:

1. All non-zero digits
2. Zeros that occur anywhere between two non-zero digits
3. Zeros that are to the right of all non-zero digits, but only if they denote a higher accuracy

Non-significant digits include:

1. Zeros to the left of all non-zero digits
2. Zeros that are to the right of all non-zero digits which do not denote accuracy

For example, in the number 000003.1240000 there are only 4 significant digits if our accuracy is 4 significant digits (3.124). However, there can also be 5 significant digits if our accuracy is 5 significant digits (3.1240).

An example is shown below:

const price = 147741.15;

// Format the above price dollar currency
let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: true,
    maximumSignificantDigits: 3,
}); // $148,000

let dollarUS2 = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: true,
}); // $147,741.15

Conclusion

In this tutorial, we've gone over how to format a number as a currency string in JavaScript. We've used the Intl.NumberFormat() method to do this, with the desired locale and several settings we can use to customize the formatting process.