Intl.NumberFormat

JavaScript has a number formatter (part of the Internationalization API).

// Create our number formatter.
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',

  // These options can be used to round to whole numbers.
  trailingZeroDisplay: 'stripIfInteger'   // This is probably what most people
                                          // want. It will only stop printing
                                          // the fraction when the input
                                          // amount is a round number (int)
                                          // already. If that's not what you
                                          // need, have a look at the options
                                          // below.
  //minimumFractionDigits: 0, // This suffices for whole numbers, but will
                              // print 2500.10 as $2,500.1
  //maximumFractionDigits: 0, // Causes 2500.99 to be printed as $2,501
});

// Use the formatter with the value of an input.
let input = document.getElementById('amount');
input.addEventListener('keyup', e => {
    document.getElementById('result').innerText = formatter.format(e.target.value);
});
input.dispatchEvent(new Event('keyup'));
<label>
    Amount
    <input id="amount" value="2500">
</label>
Result:
<span id="result"></span>

Use undefined in place of the first argument ('en-US' in the example) to use the system locale (the user locale in case the code is running in a browser). Further explanation of the locale code.

Here's a list of the currency codes.

Intl.NumberFormat vs Number.prototype.toLocaleString

A final note comparing this to the older .toLocaleString. They both offer essentially the same functionality. However, toLocaleString in its older incarnations (pre-Intl) does not actually support locales: it uses the system locale. So when debugging old browsers, be sure that you're using the correct version (MDN suggests to check for the existence of Intl). There isn't any need to worry about this at all if you don't care about old browsers or just use the shim.

Also, the performance of both is the same for a single item, but if you have a lot of numbers to format, using Intl.NumberFormat is ~70 times faster. Therefore, it's usually best to use Intl.NumberFormat and instantiate only once per page load. Anyway, here's the equivalent usage of toLocaleString:

console.log((2500).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
})); /* $2,500.00 */

Some notes on browser support and Node.js

  • Browser support is no longer an issue nowadays with 99+% support globally
  • There is a shim to support it on fossilized browsers (like Internet Explorer 8), should you really need to
  • Node.js before v13 only supports en-US out of the box. One solution is to install full-icu, see here for more information
  • Have a look at CanIUse for more information
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Intl › NumberFormat
Intl.NumberFormat - JavaScript | MDN
Chinese decimal console.log(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(number)); // 一二三,四五六.七八九 // 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 · The results can be customized using the options argument: ... 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
🌐
freeCodeCamp
freecodecamp.org › news › how-to-format-number-as-currency-in-javascript-one-line-of-code
How to Format a Number as Currency in JavaScript
November 7, 2024 - For example, 14340 would be $14,340.00 ... and style. And you can convert these numbers into currencies using the Intl.NumberFormat() method in JavaScript....
Discussions

How to handle prices/currency formatting in Javascript?
You have two concerns you need to handle: Monetary calculation Currency formatting Monetary calculations in Javascript are tricky because of the way the numerical standard IEEE 754 works. To avoid incorrect final figures you want to work in cents. You will convert your decimal to cents by multiplying by 100, do all your calculations and then convert back by dividing by 100. You want to output your result in the ideal format for your user. You should use the Intl api for this. It will handle formatting in the conventional way for a given currency and country. As long as you're working with USD it's not a big concern, though it is a useful API, but it's good practice to use it as it will make it easier to handle other currencies later which can be non trivial. For example, Ireland and Germany both use EUR but would display monetary values differently. I wouldn't go anywhere near the toFixed API. More on reddit.com
🌐 r/reactjs
16
7
February 25, 2021
Format numbers as currency | Adobe Acrobat
Forum Index > JavaScript > Format numbers as currency More on acrobatusers.com
🌐 acrobatusers.com
December 9, 2009
How to format numbers into currency format on MAKE
Hey, I have an input data that comes in the form of unformatted numbers like this 15000 1000 I want to format these numbers as the US currency formatting system with the right commas, so basically I want the output like this 15,000 1,000 How can I do this? I thought of using the format-number ... More on community.make.com
🌐 community.make.com
1
1
November 18, 2022
How to Format number as currency in JavaScript?
Lookup Intl too More on reddit.com
🌐 r/JavaScriptTips
1
1
April 24, 2023
Top answer
1 of 16
2859

Intl.NumberFormat

JavaScript has a number formatter (part of the Internationalization API).

// Create our number formatter.
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',

  // These options can be used to round to whole numbers.
  trailingZeroDisplay: 'stripIfInteger'   // This is probably what most people
                                          // want. It will only stop printing
                                          // the fraction when the input
                                          // amount is a round number (int)
                                          // already. If that's not what you
                                          // need, have a look at the options
                                          // below.
  //minimumFractionDigits: 0, // This suffices for whole numbers, but will
                              // print 2500.10 as $2,500.1
  //maximumFractionDigits: 0, // Causes 2500.99 to be printed as $2,501
});

// Use the formatter with the value of an input.
let input = document.getElementById('amount');
input.addEventListener('keyup', e => {
    document.getElementById('result').innerText = formatter.format(e.target.value);
});
input.dispatchEvent(new Event('keyup'));
<label>
    Amount
    <input id="amount" value="2500">
</label>
Result:
<span id="result"></span>

Use undefined in place of the first argument ('en-US' in the example) to use the system locale (the user locale in case the code is running in a browser). Further explanation of the locale code.

Here's a list of the currency codes.

Intl.NumberFormat vs Number.prototype.toLocaleString

A final note comparing this to the older .toLocaleString. They both offer essentially the same functionality. However, toLocaleString in its older incarnations (pre-Intl) does not actually support locales: it uses the system locale. So when debugging old browsers, be sure that you're using the correct version (MDN suggests to check for the existence of Intl). There isn't any need to worry about this at all if you don't care about old browsers or just use the shim.

Also, the performance of both is the same for a single item, but if you have a lot of numbers to format, using Intl.NumberFormat is ~70 times faster. Therefore, it's usually best to use Intl.NumberFormat and instantiate only once per page load. Anyway, here's the equivalent usage of toLocaleString:

console.log((2500).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
})); /* $2,500.00 */

Some notes on browser support and Node.js

  • Browser support is no longer an issue nowadays with 99+% support globally
  • There is a shim to support it on fossilized browsers (like Internet Explorer 8), should you really need to
  • Node.js before v13 only supports en-US out of the box. One solution is to install full-icu, see here for more information
  • Have a look at CanIUse for more information
2 of 16
1973

Number.prototype.toFixed

This solution is compatible with every single major browser:

  const profits = 2489.8237;

  profits.toFixed(3) // Returns 2489.824 (rounds up)
  profits.toFixed(2) // Returns 2489.82
  profits.toFixed(7) // Returns 2489.8237000 (pads the decimals)

All you need is to add the currency symbol (e.g. "$" + profits.toFixed(2)) and you will have your amount in dollars.

Custom function

If you require the use of , between each digit, you can use this function:

function formatMoney(number, decPlaces, decSep, thouSep) {
    decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
    decSep = typeof decSep === "undefined" ? "." : decSep;
    thouSep = typeof thouSep === "undefined" ? "," : thouSep;
    var sign = number < 0 ? "-" : "";
    var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
    var j = (j = i.length) > 3 ? j % 3 : 0;

    return sign +
        (j ? i.substr(0, j) + thouSep : "") +
        i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) +
        (decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : "");
}

document.getElementById("b").addEventListener("click", event => {
  document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>

Use it like so:

(123456789.12345).formatMoney(2, ".", ",");

If you're always going to use '.' and ',', you can leave them off your method call, and the method will default them for you.

(123456789.12345).formatMoney(2);

If your culture has the two symbols flipped (i.e., Europeans) and you would like to use the defaults, just paste over the following two lines in the formatMoney method:

    d = d == undefined ? "," : d,
    t = t == undefined ? "." : t,

Custom function (ES6)

If you can use modern ECMAScript syntax (i.e., through Babel), you can use this simpler function instead:

function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") {
  try {
    decimalCount = Math.abs(decimalCount);
    decimalCount = isNaN(decimalCount) ? 2 : decimalCount;

    const negativeSign = amount < 0 ? "-" : "";

    let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
    let j = (i.length > 3) ? i.length % 3 : 0;

    return negativeSign +
      (j ? i.substr(0, j) + thousands : '') +
      i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) +
      (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
  } catch (e) {
    console.log(e)
  }
};

document.getElementById("b").addEventListener("click", event => {
  document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});
<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>

🌐
Openexchangerates
openexchangerates.github.io › accounting.js
accounting.js: JavaScript number and currency formatting library
accounting.js is a tiny JavaScript library by Open Exchange Rates, providing simple and advanced number, money and currency formatting. Features custom output formats, parsing/unformatting of numbers, easy localisation and spreadsheet-style column formatting (to line up symbols and decimals).
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Intl › NumberFormat › NumberFormat
Intl.NumberFormat() constructor - JavaScript | MDN
January 25, 2026 - Possible values are from 0 to 100; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list ...
🌐
Reddit
reddit.com › r/reactjs › how to handle prices/currency formatting in javascript?
r/reactjs on Reddit: How to handle prices/currency formatting in Javascript?
February 25, 2021 -

When I try to add the total of the items (being fetched from an API), I am currently returning a string. When I try to convert it to a number, the formatting is off for USD.

For example, how can I convert a string of a number such as "131.40" to the number 131.40, or "14.1" to the number 14.10?

I understand that the biggest issue has to do with the numbers being floating point math. But I'm unclear on how to handle this problem. Do I convert the way my prices are being currently displayed? Any advice appreciated.

Here is the full context of my code:

const products = [{
  id: 1,
  price: 109.1,
  quantity: 1,
  title: "T-Shirt"
}, 
{
  id: 2,
  price: 22.3,
  quantity: 1,
  title: "Jeans"
}]

function totalPrice(storageItems){
      const totalPriceHolder = []
      storageItems.map((a, index) => {
       const totalPrice = a.price * a.quantity;
    totalPriceHolder.push((totalPrice))
  })

console.log("Check1", totalPriceHolder)

   const totalPriceReduce = totalPriceHolder.reduce((a, b) => a + b, 0).toFixed(2);
   console.log("Check 2", totalPriceReduce)
   return parseFloat(totalPriceReduce)
}

console.log(totalPrice(products))
Top answer
1 of 5
8
You have two concerns you need to handle: Monetary calculation Currency formatting Monetary calculations in Javascript are tricky because of the way the numerical standard IEEE 754 works. To avoid incorrect final figures you want to work in cents. You will convert your decimal to cents by multiplying by 100, do all your calculations and then convert back by dividing by 100. You want to output your result in the ideal format for your user. You should use the Intl api for this. It will handle formatting in the conventional way for a given currency and country. As long as you're working with USD it's not a big concern, though it is a useful API, but it's good practice to use it as it will make it easier to handle other currencies later which can be non trivial. For example, Ireland and Germany both use EUR but would display monetary values differently. I wouldn't go anywhere near the toFixed API.
2 of 5
3
This doesn't perform the conversions, but there is a method that formats different currencies automatically called new Intl.NumberFormat(). I'll demonstrate with an example of two sample users with different locations and currencies set: const USER_USA = { name: "some guy", currency: 'USD', locale: 'en-US', transactionAmount: 7.1346131234 }; const USER_GB = { name: "some other guy", currency: 'GBP', locale: 'en-GB', transactionAmount: 21.124361341234 }; const calcCurrency = function(locale, currency, amount) { return new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(amount); }; let activeAccount = USER_USA; console.log(calcCurrency( activeAccount.locale, activeAccount.currency, activeAccount.transactionAmount )); // Yields: "$7.13" (Yes, it even rounds it and always displays only two decimal points) activeAccount = USER_GB; console.log(calcCurrency( activeAccount.locale, activeAccount.currency, activeAccount.transactionAmount )); // Yields: "£21.12" You can literally just copy this code and it works as is, but experiment with it. Creating a function that does all this formatting for you is great.
🌐
Go Make Things
gomakethings.com › how-to-convert-numbers-into-currency-strings-with-vanilla-javascript-and-the-internationalization-api
How to convert numbers into currency strings with vanilla JavaScript and the Internationalization API | Go Make Things
April 10, 2023 - Here, I’m create a new Intl.NumberFormat object with United States English as my locale. // Create a new Intl.NumberFormat object let formatCurrency = new Intl.NumberFormat('en-US'); The new Intl.NumberFormat() constructor accepts an object of options that define how the number should be formatted. For our purposes today, the most important one is style, which defines how to format the string. By default, it has a value of decimal. We want to set it to currency to format our number as money.
Find elsewhere
🌐
Scurker
scurker.github.io › currency.js
currency.js
Allows you to customize the negative format pattern using ! as replacement for the currency symbol and # as replacement for the currency amount.
🌐
Kevinleary
kevinleary.net › blog › currency-formatting-javascript-typescript
Currency Formatting in JavaScript & TypeScript - Kevinleary.net
December 20, 2019 - I’d recommend it as the best approach to take if you want to format a price in JavaScript or TypeScript in one of the following common USD formats. const amount = 2500; amount.toLocaleString("en-US", { style: "currency", currency: "USD" }); // "$2,500.00" const amount = 2500; amount.toLocaleString("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0, }); // "$2,500" For more information check out the official toLocaleString documentation, it can be used to display numbers and floats in many other international and localized formats.
🌐
DEV Community
dev.to › schalkneethling › number-and-currency-formatting-in-javascript-using-intlnumberformat-46og
Number and Currency Formatting in JavaScript using Intl.NumberFormat - DEV Community
April 3, 2024 - To get both the currency symbol ... parameters for the NumberFormat constructor: const formattedValue = Intl.NumberFormat('en', {currency: 'USD', style: 'currency'}).format(magicCoinCurrentValue); console.log(formatt...
🌐
DZone
dzone.com › coding › javascript › how to format a number as currency in javascript
How to Format a Number as Currency in JavaScript
February 7, 2023 - Let's look at the options parameter now to see how we may change the numbers to represent a currency. This is the major parameter, and you may use this to apply additional formatting, such as currency formatting. This is a JavaScript object that has additional arguments, such as:
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Intl › NumberFormat › format
Intl.NumberFormat.prototype.format() - JavaScript | MDN
July 10, 2025 - You can also pass through very ... Intl.NumberFormat("en-US").format("1234567891234567891"); // 1,234,567,891,234,567,891 · Use the format getter function for formatting a single currency value....
🌐
Adobe Acrobat
acrobatusers.com › forum › javascript › format-numbers-currency
Format numbers as currency | Adobe Acrobat
December 9, 2009 - // assign values to the parts of the format stringvar cCurrency = '$'; // currency symbolvar nDecSep = ',0'; // use ',' thousand separator and '.' decimal pointvar nFlags = ''; // no sign or leading spacevar nWidth = ''; // no maditory widthvar nPrecision = .2; // number of decimal placesvar cConvChar = 'f'; // floating number// build format stringvar cFormat = cCurrency + '%' + nDecSep + nFlags + nWidth + nPrecision + cConvChar...
🌐
LinkedIn
linkedin.com › pulse › how-format-number-currency-javascript-techsolutionsclub
How to Format a Number as Currency in JavaScript
November 4, 2022 - And you can convert these numbers into currencies using the Intl.NumberFormat() method in JavaScript. In case you are in a rush, here is a basic example of what the code will look like: In this article, I'll help you understand each of the above ...
🌐
Vultr Docs
docs.vultr.com › javascript › examples › format-numbers-as-currency-strings
JavaScript Program to Format Numbers as Currency Strings | Vultr Docs
December 20, 2024 - This JavaScript code listens for changes in an input field (priceInput), formats the entered value as a US Dollar string, and immediately displays the formatted value in another HTML element (formattedPrice). Allow users to select their preferred currency. Format numbers based on the selected currency dynamically.
🌐
Medium
medium.com › @Marioskif › javascript-daily-tips-73-how-to-use-javascripts-intl-numberformat-for-currency-formatting-b8360ac993b5
JavaScript Daily Tips #73: How to Use JavaScript’s Intl.NumberFormat for Currency Formatting | by Mariosdev | Medium
December 13, 2024 - One critical aspect of internationalization (i18n) is displaying currency in a format that users from different countries can easily understand. JavaScript’s Intl.NumberFormat object is a powerful tool that helps you format numbers, including ...
🌐
Koladechris
koladechris.com › blog › how-to-format-currencies-in-javascript
JavaScript Format Number as Currency – How to Format Currencies in JavaScript
If you decide to use only the locale parameter, the number will be formatted as done in that location. Here’s what that looks like for Nigeria, Italy, and UK: ... If you finally use the options parameter with style set to 'currency' and currency set to the currency in that locale, the number will be formatted as currency:
🌐
Stack Abuse
stackabuse.com › how-to-format-number-as-currency-string-in-javascript
How to Format Number as Currency String in JavaScript
February 27, 2023 - In JavaScript, the easiest and most popular way to format numbers as currency strings is via the Intl.NumberFormat() method.