How to Format Number as a Currency in JavaScript

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 stringWe must pass a locale string we want to convert.
  2. OptionsThe 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