Add commas to numbers in JavaScript with these simple methods

This guide explores the three common ways to add commas to numbers in JavaScript.

Displaying numbers – whether currency or plain numbers – in an easy-to-read format improves your HTML page content and overall user experience. We usually achieve this by using commas as thousands separators with the help of JavaScript.

Psssst! Do you want to learn web development in 2023?

It's not too late! Read these first:

• How to become a web developer when you have no degree
• How to learn to code without a technical background
• How much do web developers make in the US?

There are plenty of ways to format your numbers. However, three of them are the most common among web developers:

1. Using the Number.prototype.toLocalString() method
2. Using Intl.NumberFormat() object
3. Using String.prototype.replace() method with a regular expression

Let’s explore each method with examples.

🎧 Debugging Jam

Calling all coders in need of a rhythm boost! Tune in to our 24/7 Lofi Coding Radio on YouTube, and let's code to the beat – subscribe for the ultimate coding groove!" Let the bug-hunting begin! 🎵💻🚀

Using Number.prototype.toLocalString()

The method Number.prototype.toLocalString() is the option you’re looking for if you need a quick solution. This method uses Int.NumberFormat() object internally to do language-sensitive number formatting (more on this below).

Here’s how we use it:

let number = 48372498372.34

console.log(number.toLocaleString())

If you call it without arguments, it'll format the respective number based on the default locale - in this case, the en-US locale.

Some countries, however, have their own way of formatting numbers. For instance, in German, the period symbol (".") separates thousands while the comma separates the decimal fraction.

In that case, you can add the custom locale as the first argument:

let number = 4723984738.5748937

console.log(Intl.NumberFormat('de-DE').format(number))
// output: 834.723.984.738,575

You can also fine-tune the output by passing it an options object. For instance, to display currency values:

let number = 834723984738.5748937

console.log(number.toLocaleString('en-US', { style: 'currency', currency: 'USD'}))
// output: ,723,984,738.58

Note: when you set the style as currency, you must define the currency type too. Otherwise, you'll get the following TypeError:

Uncaught TypeError: Currency code is required with currency style.
    at Number.toLocaleString (<anonymous>)
    at index.js:10:20

The possible values for currency are ISO 4217 currency codes such as USD for the US dollar, EUR for the euro, or CNY for the Chinese RMB.

If you need to display decimal places with a fixed precision, you can define a minimumFractionDigits or maximumFractionDigits in the options object accordingly.

let number = 834723984738.5748937

console.log(number.toLocaleString('en-US', { style: 'currency', currency: 'EUR', minimumFractionDigits: 3}))
// output: €834,723,984,738.575

Intl.NumberFormat()

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language-sensitive formatting (strings, numbers, date, time, etc. )

The Intl.NumberFormat() constructor creates Intl.NumberFormat objects that enable language-sensitive number formatting.

To format a number, you call the format() method against this object:

let number = 834723984738.5748937

console.log(Intl.NumberFormat('en-US').format(number))
// output: 834,723,984,738.575

The output would be the same as the toLocalString()method since it uses Intl.NumberFormat() internally (in implementations with Intl.NumberFormat API support).

And the options object is the same as the one in our toLocalString code example too:

let number = 834723984738.5748937

console.log(Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number))

A note on performance, based on MDN docs:

When formatting a large set of numbers, it is better to create an Intl.NumberFormat object and use the function provided by its format property.

Using regular expressions to add commas to numbers

Using regular expressions is the old-school way of handling number formatting.

Even though toLocalString() and Intl.NumberFomat() is well-supported across most browsers, you might want to do it in an old-fashioned way.

To do this, you should use the String.prototype.replace() method with a regular expression.

Let's see how it's done:

let number = 834723984738.5748937

console.log(number.toString().replace(/B(?=(d{3})+(?!d))/g, ','))
// output: 834,723,984,738.575

The above code, first, converts your number into a string and then calls the replace() method with this regex pattern /\B(?=(\d{3})+(?!\d))/g.

This regular expression starts with a boundary (\B) to avoid a comma at the beginning of the number. Then, it uses to lookaheads to mark numbers in thousands.

Wrapping up

Formatting a number with commas (or other symbols) can be done in a variety of ways in JavaScript. However, the approaches we explored in this quick guide are the most common among web developers:

1. Number.prototype.toLocalString()
2. Intl.FormatNumber from the ECMAScript Internationalization API
3. Regular expressions

I hope this quick guide helps you with your number-formatting task!

Thanks for reading.

Reza Lavarian Hey 👋 I'm a software engineer, an author, and an open-source contributor. I enjoy helping people (including myself) decode the complex side of technology. I share my findings on Twitter: @rezalavarian