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
🌐
GeeksforGeeks
geeksforgeeks.org › javascript › how-to-format-numbers-as-currency-string-in-javascript
How to format numbers as currency string in JavaScript ? - GeeksforGeeks
April 30, 2024 - Example 2: In this example we demonstrates formatting numbers as currency strings in JavaScript, using 'en-IN' for INR currency and 'en-US' for USD, applying Intl.NumberFormat to spans with specific classes.
🌐
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 - For example, 17225 would be $17,225.00 (US Dollars), 17,225.00 (Rupees), or €17,225,00 (Euros), depending on your chosen currency, location, and style. You may also use JavaScript's Intl.NumberFormat() function to convert these integers to ...
🌐
Codedamn
codedamn.com › news › javascript
How to Format a Number as Currency in JavaScript
June 3, 2023 - Formatting a number as currency involves adding commas as thousands separators, specifying the number of decimal places, and appending a currency symbol.
🌐
Koladechris
koladechris.com › blog › how-to-format-currencies-in-javascript
JavaScript Format Number as Currency – How to Format Currencies in JavaScript
September 28, 2024 - This approach is still not sustainable because it requires custom logic for different locales and currencies, making it complex and error-prone. There’s a solution, though. That solution is the Intl.NumberFormat object of the JavaScript Internationalization API.
🌐
Numeraljs
numeraljs.com
Numeral.js
// load a locale numeral.register('locale', 'fr', { delimiters: { thousands: ' ', decimal: ',' }, abbreviations: { thousand: 'k', million: 'm', billion: 'b', trillion: 't' }, ordinal : function (number) { return number === 1 ? 'er' : 'ème'; }, currency: { symbol: '€' } }); // switch between locales numeral.locale('fr');
Find elsewhere
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>

🌐
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.
🌐
Sentry
sentry.io › sentry answers › javascript › how to format numbers as currency strings
How to format numbers as currency strings | Sentry
March 15, 2023 - Sentry Answers>JavaScript> How ... display to a user. How do you do this? You can create an Intl.NumberFormat object to format a number as a currency string....
🌐
Scurker
scurker.github.io › currency.js
currency.js
A small, lightweight javascript library for working with currency values.Download currency.js
🌐
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....
🌐
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.
🌐
W3Schools
w3schools.com › jsref › jsref_tolocalestring_number.asp
JavaScript Number toLocaleString() Method
❮ Previous JavaScript Number Reference Next ❯ · Format a number into a string, using locale settings: let num = 1000000; let text = num.toLocaleString(); Try it Yourself » · Format a number into a string, using the locale specific of FINLAND: let num = 1000000; let text = num.toLocaleString("fi-FI"); Try it Yourself » · Format a number into a currency string, using the locale specific of USA: let num = 1000000; let text = num.toLocaleString("en-US", {style:"currency", currency:"USD"}); Try it Yourself » ·
🌐
Justin McCandless
justinmccandless.com › post › formatting-currency-in-javascript
Formatting Currency in Javascript · Justin McCandless
December 13, 2014 - var nf = new Intl.NumberFormat(‘en-US’, { style: ‘currency’, currency: ‘USD’, minimumFractionDigits: 2, maximumFractionDigits: 2 }); nf.format(123456.789); // ‘$123,456.79’
🌐
GitHub
github.com › scurker › currency.js
GitHub - scurker/currency.js: A javascript library for handling currencies · GitHub
currency.js is a lightweight ~1kb javascript library for working with currency values. It was built to work around floating point issues in javascript.
Starred by 3.4K users
Forked by 147 users
Languages   JavaScript 94.7% | TypeScript 5.3%
🌐
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 - The numbers we are printing are monetary values so they are missing a decimal value and a currency symbol. One way we can do this is by using JavaScript template literals to append and prepend the pieces we are missing.
🌐
Honeybadger
honeybadger.io › blog › currency-money-calculations-in-javascript
Currency Calculations in JavaScript - Honeybadger Developer Blog
September 13, 2021 - Dinero.js is a lightweight, immutable, and chainable JavaScript library developed to work with monetary values and enables global settings, extended formatting/rounding options, easy currency conversions, and native support to Intl.
🌐
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 doesn't provide that information); the default for percent formatting is the larger of minimumFractionDigits and 0.
🌐
Ash Allen Design
ashallendesign.co.uk › blog › formatting-monetary-values-in-javascript
Formatting Monetary Values in JavaScript | Ash Allen Design
June 11, 2025 - 3 currency: 'GBP', 4 minimumFractionDigits: 0, 5 maximumFractionDigits: 2, 6}); 7 · 8const formattedValueOne = formatter.format(123.456); // '£123.46' 9const formattedValueTwo = formatter.format(67); // '£67' 10const formattedValueThree = formatter.format(1000); // '£1,000' In this Quickfire article, we've looked at how you can format monetary values in JavaScript using the toLocaleString() method and the Intl.NumberFormat object.