How to add spaces or commas when formatting numbers in JavaScript: A complete guide

How to add commas when formatting numbers in JavaScript? A detailed guide

Have you ever wondered why 1000000 is hard to read, but 1,000,000 is instantly clear? The human eye simply isn't designed for long strings of digits. Thousands separators (commas, spaces, or dots) are not just about aesthetics — they are about usability and information perception.

If you write in JavaScript and work with prices, statistics, IDs, or any numerical data, sooner or later you'll face the question: "How do I format a number by adding commas or spaces between thousands?". On Stack Overflow, this question has garnered thousands of views — meaning it concerns many developers.

In this article, we won't just give you ready-made code. We'll break down three main methods: from the modern built-in API to classic regular expressions. You'll learn how to make JavaScript "speak" the language of readable numbers. Let's go!

Why is a simple number a problem?

Imagine displaying on a website: Price: 1234567.89 rub.. The eye stumbles. How much is that? A million? Twelve million? But if you add commas: 1,234,567.89 — it's immediately clear: just over a million.

In JavaScript, a number is just a Number. It doesn't have a "built-in" display format. Everything we see is the result of converting it to a string. And that's where we, as developers, come into play.

Method 1: toLocaleString() — the king of simplicity

The most elegant and modern way is to use the toLocaleString() method. It's available on every number in JavaScript and allows you to account for the user's locale.

const number = 1234567.89;\nconst formatted = number.toLocaleString('ru-RU');\nconsole.log(formatted); // "1 234 567,89"\n

Note: for the Russian locale (ru-RU), the thousands separator is a non-breaking space, and the decimal separator is a comma. For the American locale (en-US), it's a comma and a period:

console.log(number.toLocaleString('en-US')); // "1,234,567.89"\n

Pros:

\n
• Minimal code.
\n
• Respects local standards (spaces, periods, commas).
\n
• Works in all modern browsers and Node.js.
\n

Cons:

\n
• Less control over the format (you can't simply replace a space with a comma without additional manipulation).
\n
• Older browsers (IE11) may not support the second argument (locales).
\n

Method 2: Intl.NumberFormat — flexibility and power

If you need full control, use the Intl.NumberFormat object. It uses the same mechanism as toLocaleString(), but with extended settings.

const formatter = new Intl.NumberFormat('ru-RU', {\n    style: 'decimal',\n    useGrouping: true, // Enables thousands separators\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2\n});\n\nconsole.log(formatter.format(1234567.8)); // "1 234 567,80"\n

Want currency? Easy:

const currencyFormatter = new Intl.NumberFormat('ru-RU', {\n    style: 'currency',\n    currency: 'USD',\n    minimumFractionDigits: 0\n});\nconsole.log(currencyFormatter.format(1000000)); // "1 000 000 $"\n

Can you change the thousands separator manually? There's no direct option, but you can use replace:

let result = formatter.format(1234567.89);\nresult = result.replace(/\\s/g, ','); // Replace spaces with commas\nconsole.log(result); // "1,234,567,80"\n

Pros:

\n
• Maximum flexibility (currency, percentages, units of measurement).
\n
• Performance (you can create it once and reuse it).
\n

Cons:

\n
• Slightly more code than toLocaleString().
\n
• Still depends on the locale.
\n