JavaScript Number to Number with Commas

In JavaScript, it is often necessary to display numbers with commas, especially when dealing with large numbers. In this tutorial, we will show you how to convert a JavaScript number to a number with commas using different approaches.

Approach 1: Using Internationalization API

The simplest and quickest way of formatting a number with commas is by using the toLocaleString method of the JavaScript Internationalization API. This method takes an optional parameter which specifies the locale to use for formatting the number.

let num = 1234567.89;
let formattedNum = num.toLocaleString(); // "1,234,567.89"

If you need to format the number for a specific locale, you can pass the locale as a parameter to the toLocaleString method.

let num = 1234567.89;
let formattedNum = num.toLocaleString('en-IN'); // "12,34,567.89"

Approach 2: Using Regular Expressions

Another approach to format a number with commas is by using regular expressions. This approach involves converting the number to a string and then using a regular expression to match every three digits and adding a comma in between.

function numberWithCommas(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

let num = 1234567.89;
let formattedNum = numberWithCommas(num); // "1,234,567.89"

The regular expression /\B(?=(\d{3})+(?!\d))/g matches every group of three digits that are not followed by another digit. The \B assertion matches the boundary between two non-word characters (in this case, digits) whereas the positive lookahead (?=(\d{3})+(?!\d)) matches any sequence of three digits not followed by another digit. The g modifier tells the regular expression engine to match all occurrences in the string.

Approach 3: Using D3.js library

D3.js is a powerful JavaScript library for data visualization. It also provides a convenient method for formatting numbers with commas. To use this method, you need to include the D3 library in your HTML file.

<script src="https://d3js.org/d3-format.v2.min.js"></script>

Once you have included the library, you can use the format function to format a number with commas.

let num = 1234567.89;
let formattedNum = d3.format(",")(num); // "1,234,567.89"

The , specifier in the format function separates every three digits with a comma. You can also specify the number of decimal places and the decimal point.

let num = 1234567.89;
let formattedNum = d3.format(",.2f")(num); // "1,234,567.89"

The .2f specifier formats the number to two decimal places with a decimal point. The comma separator still applies.

Conclusion

In this tutorial, we have shown you three different approaches for formatting a JavaScript number with commas. Depending on your requirements and the libraries you have available, you can choose the most suitable approach for your project.