Print Number With Commas

How to Print Number With Commas as Thousands Separators in JavaScript

JavaScript is a powerful programming language for web development. It offers tons of features and functions to work with different kinds of data including numbers. Often you may need to print numbers with commas as thousands separators in JavaScript. In this article, we will learn how to do this.


How to Print Number With Commas as Thousands Separators in JavaScript

Let us say you have the following number.

var num=123456789.1234;

We will use a regex (regular expression) to determine the positions to add comma separators for thousands place. We will use the following regular expression in replace() function to add comma separators at thousands places.

\B(?=(\d{3})+(?!\d))

The above regex uses to 2 lookahead assertions.

  • The positive assertion looks for any point in the string that has multiple of 3 digits after it.
  • The negative assertion checks if every group of 3 consecutive digits in the string has a digit or a point after it.

For example, in the above number, the positive assertion will match all positions to the left of 789. But the negative assertion will check if every group of 3 consecutive digits has a digit after it. Since there is a point after 789, a comma will be added before it. But since there is a digit 9 after 678 no comma is added before it. Similarly, there is a comma after 456, that was added above, so another comma is added before 4.

Here is the replace() function which uses the above regex to determine thousands places and add comma separators in it.

replace(/\B(?=(\d{3})+(?!\d))/g, ",")

But the above function will add commas even after decimal point. So we will split our string into 2 parts, one before the decimal point and the other after.

var parts = x.toString().split(".");

Then we will call the above mentioned replace() function on the first part of the string, that is before the decimal point.

parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");

Then we will concatenate the above modified string with the second part of the string that comes after the decimal point.

parts.join(".");

We will wrap the above code in a JavaScript for easier execution.

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

When you call the above function on our number you will get the following output.

numberWithCommas(123456789.1234);
123,456,789.1234

Alternatively, you can also use toLocaleString() function to add commas in thousands places.

x.toLocaleString();

Here is the above code in a function.

function numberWithCommas(x) {
    return x.toLocaleString();
}

The difference between the two approaches is that, in the first case, you can customize the function as per your requirement. For example, in some European nations, comma is used instead of decimal point and vice versa. So if you want to use another separator such as dot, as in European style, instead of comma separators, you just need to modify the replace function to use dot instead of comma and vice versa.

function numberWithDots(x) {
    var parts = x.toString().split(",");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    return parts.join(",");
}

Similarly, if you want to add currency symbols such as $ at the beginning of the number, you can modify your function as shown below.

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return '$'+ parts.join(".");
}

This level of customization is not available when you use toLocaleString() function. Also, the output of toLocaleString() function depends on client browser settings so it can differ from one browser to another.

In this article, we have learnt how to print number with commas as thousands separators in JavaScript.

Also read:

How to Mount Remote Filesystem in Linux
How to Copy Files from Linux to Windows
How to Set Process Priority in Linux
How to Change Default MySQL Data Directory
How to Fix firewall-cmd Command Not Found

Leave a Reply

Your email address will not be published.