Add commas to numbers in JavaScript (Explained with examples)

Example of a dashboard with financial data

Add commas to numbers in JavaScript

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 significantly improves your HTML page content and overall user experience. We usually achieve this by adding commas to numbers with the help of JavaScript and separating the digits by hundreds.

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 study each apporach with examples.

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:

  • tolocalstring-example.js
 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 US locale.

Some countries have their way of formatting numbers. For instance. in Germany, hundreds of separated by a period (".") and decimals with a comma. In that case, you can add the key as the first argument.

  • tolocalstring-locale-example.js
 let number = 4723984738.5748937

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

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

  • tolocalstring-currency-example.js
 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 too. Otherwise, you'll get the following TypeError:

  • numer-formatting-typeerror.js
 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.

  • tolocalstring-fractions-example.js
 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 string comparison, number formatting, and the date and time formatting.

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:

  • formatnumber-example.js
 let number = 834723984738.5748937

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

The output would be the same toLocalString() since toLocalString 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:

  • formatnumber-options-example.js
 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 expression 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 that marks separates the hundreds by commas.

Let's see how it's done:

  • regex-formatting-example.js
 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 hundreds. Consequently, The replace() method places a comma in each match.

Wrapping up

Formatting numbers 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 guide helps you find the answer you're looking for.

Thanks for reading.

Author photo

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: @lavary_

If you read this far, you can tweet to the author to show them you care. Tweet a Thanks

In this article:

Disclaimer: This post might contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.