The way we read numbers has one unique thing: we need commas in numbers to understand them. In this article, we will learn different methods to format numbers by adding commas in JavaScript and making our numbers more user-friendly on a webpage.
How to Format Numbers with Commas in JavaScript?
When we are displaying numbers on a webpage, we have to make sure that they are easy to read. Whether we are dealing with currency values, statistical figures, or any other numerical information, adding commas to separate thousands, millions, and beyond can be a really good option.
JavaScript offers several methods for formatting numbers with commas. Here we will cover the toLocaleString() method, leveraging the Intl.NumberFormat() object, and using regular expressions. Each approach has its advantages and use cases, let’s explore each of them in detail.
1) toLocaleString() Method
The toLocaleString is a built-in method in JavaScript to format numbers with commas. Using this method, we can format numbers by following a specific country’s formatting rules. By default, it follows the formatting conventions of the United States (en-US). But we can specify different locales according to our needs.
For using this method we can directly call it on a number and in return we will get a string which will be a representation of the number with commas as thousands separators. Let’s understand it with the help of an example:
// Define a numeric value const number = 1234567890; // use the toLocaleString() method to format the number with commas const formattedNumber = number.toLocaleString(); // Display the formatted number console.log(formattedNumber);
Output:
1,234,567,890Therefore we have successfully inserted commas at the appropriate places and now our number is more readable.
2) Intl.NumberFormat() Object
This is also a built-in JavaScript object and provides language-sensitive number formatting. It helps us to structure numbers based on specific locales, taking into account the formatting conversions of that particular region. This method is very useful when we have to format numbers for different regions or languages.
We first have to create a new instance of Intl.NumberFormat(), passing the locale as a parameter. After that we have to call the format() method of the formatting object, passing the number we want to format. We can then store the result in a variable as shown below:
// Define a numeric value
const number = 1234567890;
// Create an Intl.NumberFormat object with 'en-US' locale
const formatter = new Intl.NumberFormat('en-US');
// Use the formatter to format the number according to the 'en-US' locale
const formattedNumber = formatter.format(number);
// Display the formatted number
console.log(formattedNumber);Output:
1,234,567,890The result is formatted properly with commas, following the formatting rules of the ‘en-US’ locale.
3) Using Regular Expressions
Regular expressions, often referred to as regex, provide a powerful tool for identifying and manipulating patterns within strings.
By using regex we can search for specific patterns in a string and replace them with the desired values. Here regex can be used to add commas to format a number.
We will employ the replace() method of the string and provide a regex pattern to identify the positions where commas should be inserted.
We have to first convert the number to a string using the tostring() method. After this we will use the pattern /\B(?=(\d{3})+(?!\d))/g in replace() method. This regex pattern is designed to identify positions where commas should be inserted, ensuring that they only appear between groups of three digits. See this example for more understanding:
// Define a numeric value
const number = 1234567890;
// Convert the number to a string and then use replace() with a regex pattern
const formattedNumber = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// Display the result
console.log(formattedNumber);Output:
1,234,567,890Commas are successfully inserted at the appropriate places using regular expressions, making them more presentable.
Regex is also used to do email validation in JavaScript.
Conclusion
We have successfully covered three different approaches to format numbers in JavaScript. This technique enhances user experience and improves the readability of numerical information. If you need more assistance, get help for your JavaScript assignment now from top experts.
