How to Convert Number to Currency Format in JavaScript

by

To convert a number to currency format in JavaScript, use the Intl.NumberFormat() function. The Intl.NumberFormat() is a built-in object enables language-sensitive number formatting. The Intl.NumberFormat() constructor creates Intl.NumberFormat objects that enable language-sensitive number formatting.

Syntax

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

const convertedRupee = indianRupee.format(price);

Arguments

It accepts two arguments

Locale string – We need to pass a locale string that we want to convert.

Options – The second argument is options we can apply to format. It is an object.

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

style

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

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

    currency

    We need to specify the currency name we want to format in the currency field. Currency fields such as “INR”, “USD”, “EUR”, “CAD”, etc.

    It has another 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, if we pass a 5 digit price and we want to convert them into 3 digits, we need to use these options. 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.

    That’s it for this tutorial.

    Leave a Comment