Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Numbers & Math

JavaScript Number Formatting

Written by Published

toLocaleString formats numbers as currency, percentages and grouped digits.

toFixed handles decimal places but nothing else.

For anything a person will read, this is the better tool.

Example

Example

javascript

const value = 1234567.891;

console.log(value.toLocaleString("en-GB"));

The digits are grouped and the decimals rounded.

Formatting Options

The first argument is a locale, such as en-GB or en-IN.

The second is an options object.

style can be decimal, currency, percent or unit.

Syntax

Syntax

javascript

value.toLocaleString(locale, { style: "currency", currency: "GBP" });

The currency code is required when the style is currency.

Grouping Digits

Different locales group digits differently.

Example

Example

javascript

const value = 1234567;

console.log(value.toLocaleString("en-GB"));
console.log(value.toLocaleString("en-IN"));

The Indian grouping uses lakhs and crores.

Currency

The symbol and its position come from the locale.

Example

Example

javascript

const price = 1234.5;

console.log(price.toLocaleString("en-GB", { style: "currency", currency: "GBP" }));
console.log(price.toLocaleString("en-IN", { style: "currency", currency: "INR" }));

Two decimal places are added automatically for money.

Percentages

The value is multiplied by 100, so pass a fraction.

This catches people out the first time.

Example

Example

javascript

console.log((0.256).toLocaleString("en-GB", { style: "percent" }));
console.log((0.256).toLocaleString("en-GB", { style: "percent", maximumFractionDigits: 1 }));

Pass 0.25 for 25 percent, not 25.

Controlling Decimals

minimumFractionDigits keeps trailing zeros.

Example

Example

javascript

const value = 5;

console.log(value.toLocaleString("en-GB", { minimumFractionDigits: 2 }));

The output is 5.00.

Reusing a Formatter

Intl.NumberFormat creates the formatter once.

That is noticeably faster when formatting many values.

Example

Example

javascript

const money = new Intl.NumberFormat("en-GB", {
  style: "currency",
  currency: "GBP"
});

console.log(money.format(1234.5));
console.log(money.format(99));

Build it once and use it for the whole list.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Number Formatting</title>
</head>
<body>

  <h1>Number Formatting</h1>

  <p id="out"></p>

  <script>
    const value = 1234567.891;
    const money = new Intl.NumberFormat("en-GB", {
      style: "currency",
      currency: "GBP"
    });

    document.getElementById("out").innerHTML =
      "Grouped: " + value.toLocaleString("en-GB") +
      "<br>Currency: " + money.format(value) +
      "<br>Percent: " + (0.256).toLocaleString("en-GB", { style: "percent" });
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try another locale:

Change en-GB to en-IN and compare the grouping.

Important Points

  • toLocaleString formats numbers for people.
  • The locale controls grouping and symbols.
  • style: "currency" needs a currency code.
  • Percent style multiplies by 100.
  • Intl.NumberFormat is faster when reused.

Conclusion

Never build currency formatting by hand; the locale rules are complicated.

Passing a fraction for percentages is the one trap here.

Reuse a formatter whenever you are formatting a list.

PreviousJavaScript Math.min and Math.maxNextJavaScript Integer Safety