Format Numbers With Thousands Separators in JavaScript

By the end of this page, you will understand how to format numbers with thousands separators in JavaScript, when to use built-in methods like toLocaleString() and Intl.NumberFormat, and when a custom formatting function is useful.

When you display large numbers to users, readability matters. A value like 1234567 is harder to scan than 1,234,567. Adding separators every three digits makes the number easier to understand quickly.

In JavaScript, number formatting is usually a display concern rather than a math concern. That means you typically keep the value as a number for calculations, and only format it as a string when showing it in the UI, logs, reports, or exported output.

The most important idea is this:

• Numbers are for computation
• Formatted strings are for display

JavaScript gives you built-in tools for this:

• number.toLocaleString() for simple formatting
• Intl.NumberFormat for reusable formatting logic

You can also write a custom solution, often with a regular expression, if you want fixed behavior that does not depend on locale settings.

This concept matters in real programming because formatted numbers appear everywhere:

• dashboards
• invoices
• admin panels
• analytics reports
• e-commerce prices
• financial summaries

If you format numbers incorrectly, users may misunderstand values, especially for money, counts, or measurements.

Think of a large number as a long word that is hard to read without spaces.

For example:

• 1234567 is like thisisaverylongword
• 1,234,567 is like this is a very long word

The commas act like visual separators. They do not change the value, but they make it much easier for people to read.

So the job of number formatting is like adding punctuation to a sentence: the meaning stays the same, but the result becomes clearer.

The simplest built-in way in JavaScript is toLocaleString().

const num = 1234567;
console.log(num.toLocaleString());
// Example output: "1,234,567"

This also works with decimals:

const num = 1234567.89;
console.log(num.toLocaleString());
// Example output in many environments: "1,234,567.89"

If you want more control or need to reuse the formatter, use Intl.NumberFormat:

const formatter = new Intl.NumberFormat('en-US');

console.log(formatter.format(1234567));
// "1,234,567"

console.log(formatter.format(1234567.89));
// "1,234,567.89"

A custom regex-based approach is also possible:

Consider this example:

const num = 1234567.89;
const result = num.toLocaleString('en-US');
console.log(result);

Step by step:

1. num stores the number 1234567.89.
2. toLocaleString('en-US') is called on that number.
3. JavaScript converts the number into a formatted string using the en-US style.
4. In en-US, thousands are separated by commas and decimals use a period.
5. The returned value is the string "1,234,567.89".
6. console.log(result) prints that string.

Now compare that to a custom regex version:

function formatNumber(value) {
    const [integerPart, decimalPart] = String(value).split('.');
    const formattedInteger = integerPart.replace(, );
     decimalPart ?  : formattedInteger;
}

.(());

Number formatting is common in many kinds of software.

• E-commerce: showing product prices, order totals, and discounts
• Analytics dashboards: displaying page views, revenue, or user counts
• Finance apps: formatting balances, transactions, and account summaries
• Admin panels: presenting IDs, counts, and metrics clearly
• Reports and exports: making CSV previews or PDF summaries more readable
• APIs and UI layers: formatting values before rendering them to users

Examples:

const totalUsers = 2500000;
console.log(totalUsers.toLocaleString('en-US'));
// "2,500,000"

const revenue = 9876543.21;
console.log(new Intl.NumberFormat('en-US').format(revenue));
// "9,876,543.21"

A key point: the stored value should usually remain numeric, while the formatted version should be created only when needed for display.

In real projects, developers usually avoid hand-written regex formatting unless they have a specific reason. Common patterns include:

Use built-in formatters in UI code

const users = 1234567;
const displayUsers = users.toLocaleString('en-US');

This is simple and readable.

Reuse a formatter object

If you format many numbers, create one formatter and reuse it:

const numberFormatter = new Intl.NumberFormat('en-US');

function renderStats(count) {
    return numberFormatter.format(count);
}

This is common in dashboards and reporting code.

Keep formatting at the presentation layer

const subtotal = 1234567.89;
const tax = 1000;
const total = subtotal + tax;

console.log(total); // raw number for logic
console.(total.()); 

Here are common beginner mistakes when formatting numbers.

1. Formatting too early

Broken example:

let total = (1000).toLocaleString('en-US');
total += 500;
console.log(total);
// "1,000500"

Why it happens:

• toLocaleString() returns a string, not a number.
• Adding 500 to a string causes string concatenation.

Better:

let total = 1000;
total += 500;
console.log(total.toLocaleString('en-US'));
// "1,500"

2. Assuming formatting always uses commas

console.log((1234567).toLocaleString());

This depends on environment locale. In some locales, the output may not use commas.

If you specifically want commas, pass a locale such as :

toLocaleString() vs

// Quick built-in formatting
(1234567).toLocaleString('en-US');
// "1,234,567"

// With decimals
(1234567.89).toLocaleString('en-US');
// "1,234,567.89"

// Reusable formatter
const formatter = new Intl.NumberFormat('en-US');
formatter.format(1234567);
// "1,234,567"

// Custom regex formatter
function formatNumber(value) {
  const [integerPart, decimalPart] = String(value).split('.');
  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;
}

Rules to remember

• Use numbers for calculations.
• Use formatted strings for display.
• toLocaleString() returns a string.

What is the simplest way to add commas to a number in JavaScript?

Use toLocaleString():

(1234567).toLocaleString('en-US');

Does toLocaleString() work with decimal numbers?

Yes. It can format both integers and floating-point numbers.

Should I use regex or toLocaleString()?

Use toLocaleString() or Intl.NumberFormat in most cases. Use regex only if you need a custom fixed format.

Why does toLocaleString() sometimes not use commas?

Because its output depends on locale. If you want commas specifically, pass 'en-US'.

Can I format negative numbers too?

Yes. Built-in methods handle negative numbers automatically.

Is the formatted result still a number?

No. It is a string. That means it should usually be used only for display.

What is the difference between toLocaleString() and Intl.NumberFormat?

is great for quick one-off formatting. is better when you want to reuse a formatter or configure options in one place.

• Strings — formatted numbers become strings, not numbers.
• Regular expressions — useful for custom formatting solutions.
• Number methods — toLocaleString() is a built-in number method.
• Intl.NumberFormat — the standard API for reusable number formatting.
• Type conversion — formatting often involves converting between numbers and strings.
• NaN and validation — important when formatting values from user input or APIs.
• Rounding numbers — often needed alongside formatting decimals.
• Currency formatting — a practical extension of number formatting.