In this article, we will explore the methods for formatting numbers with commas in JavaScript. There are instances when it becomes necessary to present a number with commas on an HTML page to enhance readability. By utilizing JavaScript, we can convert a number into a value that is separated by commas. In the following sections, we will examine the various approaches to achieve this.
One method for formatting numbers with commas is by utilizing the toLocaleString function.
Using toLocaleString method
The toLocaleString function in JavaScript serves the purpose of transforming the components of a specified array into a string format, with each string element being delimited by a comma ",". By passing "en-US" as an argument, this method formats the output according to the conventions of the United States and the English language, thereby displaying numbers with commas separating the thousands.
Now, let's understand the method via an example.
Example
In this illustration, we utilize the toLocaleString method to present numbers with comma separation. In this case, we are formatting two different types of numbers: one is an integer and the other is a floating-point number. Upon clicking the specified button, the provided numbers will be formatted to include commas. The formatting will insert commas at the thousand's position in the numbers.
<!DOCTYPE html>
<html>
<head>
<title> Using JavaScript's toLocaleString() method </title>
</head>
<body>
<h1> Welcome to the logic-practice.com </h1>
<p>
This is an example of using the JavaScript <b> toLocaleString() </b> method to format a number with commas as thousands of separators in JavaScript
</p>
<b> Number1 = '123456789' </b> </br>
<b> Number2 = '1234.56789' </b>
<p> Click the below button to print the above numbers separated with commas </p>
<button onclick = "fun()"> Click me </button>
<script type = "text/javascript">
function fun() {
num1 = 123456789;
num2 = 1234.56789;
output1 = num1.toLocaleString('en-US');
output2 = num2.toLocaleString('en-US');
document.write("<b> Given number = </b>", num1);
document.write("</br> <b> Formatted number = </b>", output1);
document.write("</br> <br> <b> Given number = </b>", num2);
document.write("</br> <b> Formatted number = </b>", output2);
}
</script>
</body>
</html>
Output
Upon running the code provided above, the resulting output will be -
Upon selecting the specified button, the resulting output will be -
If you prefer not to utilize the aforementioned approach, there exists an alternative method for formatting numbers with commas.
Using Intl.NumberFormat object
The Intl.NumberFormat object serves to format numbers according to the conventions of a particular language. Additionally, it can be utilized to display percentages or currency, depending on the locale that is indicated. The term 'locale' refers to the parameter given, which dictates the specific format in which the numbers will be represented.
We can provide "en-US" as an argument to set the locale to that of the United States, using the English language, which will format numbers with commas separating the thousands. Additionally, we will utilize the format method of this object to generate a string representation of a number in the chosen locale. The format function will accept a number and produce a string formatted with commas.
Now, let's understand the method via an example.
Example
In this illustration, we will utilize the Intl.NumberFormat object to format both integer values and decimal numbers.
<!DOCTYPE html>
<html>
<head>
<title> Using Intl.NumberFormat() </title>
</head>
<body>
<h1> Welcome to the logic-practice.com </h1>
<p>
This is an example of using the <b> Intl.NumberFormat() </b> object to format a number with commas as thousands of separators in JavaScript
</p>
<b> Number1 = '482351769' </b> </br>
<b> Number2 = '4823.51769' </b>
<p> Click the below button to print the above numbers separated with commas </p>
<button onclick = "fun()"> Click me </button>
<script type = "text/javascript">
function fun() {
num1 = 482351769;
obj1 = new Intl.NumberFormat('en-US');
output1 = obj1.format(num1);
document.write("<b> Given number = </b>", num1);
document.write("</br> <b> Formatted number = </b>", output1);
num2 = 4823.51769;
obj2 = new Intl.NumberFormat('en-US');
output2 = obj2.format(num2);
document.write("</br> <br> <b> Given number = </b>", num2);
document.write("</br> <b> Formatted number = </b>", output2);
}
</script>
</body>
</html>
Output
Upon the completion of the execution of the aforementioned code, the result will be -
Upon clicking the specified button, the resulting output will be -
Using regular expressions to format numbers with commas
A regular expression, often abbreviated as regex, is a string of characters that defines a specific search pattern. By utilizing regex, we have the capability to locate and substitute values within a string, as well as to format them according to specified criteria.
Let’s examine the regex pattern provided below. This regex pattern will scan the input string and place a marker immediately following any occurrence of three consecutive digits. We can utilize this regex pattern in conjunction with the String.replace method to substitute the markers with commas.
/\B(?=(\d{3})+(?!\d))/g
Now, let's understand it with an example.
Example
In this illustration, we demonstrate how to utilize regular expressions in JavaScript for the purpose of formatting numbers with commas. In this case, we apply a regex pattern that inserts a marker following every group of three digits within a number. Additionally, we employ the String.replace method to substitute the marker with a comma.
<!DOCTYPE html>
<html>
<head>
<title> Using regualar expression to format numbers with commas in javascript </title>
</head>
<body>
<h1> Welcome to the logic-practice.com </h1>
<p>
This is an example of using the regular expression in javascript to format a number with commas </p>
<b> Number1 = '1482351769' </b> </br>
<b> Number2 = '1000.51769' </b>
<p> Click the below button to print the above numbers separated with commas </p>
<button onclick = "fun()"> Click me </button>
<script type = "text/javascript">
function fun() {
num1 = 1482351769;
output1 = num1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
document.write("<b> Given number = </b>", num1);
document.write("</br> <b> Formatted number = </b>", output1);
num2 = 1000.51769;
output2 = num2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
document.write("</br> </br> <b> Given number = </b>", num2);
document.write("</br> <b> Formatted number = </b>", output2);
}
</script>
</body>
</html>
Output
Upon running the code provided above, the resulting output will be -
Upon selecting the specified button, the resulting output will be -
This concludes our tutorial. In this piece, we have explored three methods to format a number with commas in JavaScript. We hope you find this article enlightening and useful in grasping the various techniques for formatting numbers with commas in JavaScript.