How to Format Number as a Currency in JavaScript

by

To format numbers as a currency in JavaScript, use the Intl.NumberFormat() constructor. The Intl.NumberFormat() is a built-in constructor that enables language-sensitive number formatting.

Syntax

const indianRupee = Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'currency name'
});

const convertedRupee = indianRupee.format(price);

Parameters

  1. Locale string – We must pass a locale string we want to convert.
  2. Options – The second argument is options we can apply to the format. It is an object.

The options are style, currency, maximumSignificantDigits, and useGrouping.

Style

It specifies what type of formatting we want. And it’s different types of values are:

  1. decimal –  decimal style formatting.
  2. unit – unit formatting.
  3. currency – currency style formatting

    Currency

    We must specify the currency name we want to format in the currency field. Currency fields such as “INR”, “USD”, “EUR”, “CAD”, etc. It has two additional options such as maximumSignificantDigits and useGrouping.

    But before we learn them, let’s convert the number into currency.

    Example

    let usDollar = Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
});

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

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

let price = 23490;

// number to USD
console.log("Dollar : ", usDollar.format(price));

// number to INR
console.log("Rupee : ", indianRupee.format(price));

// number to EUR
console.log("EURO : ", eurozone.format(price));

    Output

    Dollar : $23,490.00
Rupee : ₹23,490.00
EURO : €23.490,00

    In the above example, we saw how to convert a number to INR, USD, EURO, etc.

    Additional Options

    Let’s see the other two options in currency formatting.

    useGrouping

    By using this field, we can get currency by comma-separated. Its value is boolean. By default, it is set to true.

    maximumSignificantDigits

    It can be allowed to set the number of digits we want. It’s around the given price. For example, we must use these options if we pass a 5-digit price and want to convert them into 3 digits. It’s round our price and gives a simple number.

    Example

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

let indianRupee = Intl.NumberFormat("en-IN", {
   style: "currency",
   currency: "INR",
   useGrouping: true,
   maximumSignificantDigits: 3
});

let price = 234390.2322;

// Does not separate currency with comma
console.log("Dollar : ", usDollar.format(price));

// It's round the our price
console.log("Rupee : ", indianRupee.format(price));

    Output

    Dollar : $234390.23
Rupee : ₹2,34,000

    In the above example, we can see the use of our two additional options, which is very useful.

    Using concatenation to format numbers as currency

    In this approach, we concatenate a number into a currency string in JavaScript called the concatenation method.

    const number = 111111.123456;
const result = '$ ' + number.toFixed(2);

console.log(result);

    Output

    $ 111111.12

    Using RegEx to format numbers as currency

    A regular expression (RegEx) is a series of characters that comprises a search pattern.

    const number = 111111.123456.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');

console.log('$ ' + number);

    Output

    $ 111,111.12

    In this code, we used the replace() method with the RegEx pattern that returns the number input with a currency string.

    That’s all!

    Leave a Comment