Sometimes, you may need to format a number value with commas in your HTML pages to make it easier to read.
You can transform a number value into a comma-separated string by using JavaScript. Here are two ways to do that:
- Using toLocaleString() method
- Format number with commas using regular expressions
- Conclusion
Let’s learn both ways to format numbers next.
Using toLocaleString() method
The Number.toLocaleString() method is a built-in method of the Number object that returns a locale-sensitive string representing the number.
You can pass "en-US" as the parameter so that it will always create a thousand separator for your number.
Here’s an example:
let n = 234234234; let str = n.toLocaleString("en-US"); console.log(str); // "234,234,234"
The toLocaleString() also works with floating numbers as follows:
let n = 234234.555; let str = n.toLocaleString("en-US"); console.log(str); // "234,234.555"
But if you don’t want to use toLocaleString() method, there’s also another way to format numbers with commas.
You can use the String.replace() method and regex, which you will learn next.
Format number with commas using regular expressions
A Regular expression (regex) is a sequence of characters that specifies a search term.
By using regular expressions, you will be able to find and replace values in your string and format them in a way that you require.
For example, consider the following regex pattern:
The regex pattern above will search your string and put a marker when it finds 3 consecutive digits.
You can use the regex pattern in combination with String.replace() to replace the markers with commas.
The following example shows how it works:
function numberWithCommas(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } let n = numberWithCommas(234234.555); console.log(n); // "234,234.555"
Conclusion
And those are two ways you can format a number with commas using JavaScript.
Formatting a number using regex and replace() method is always faster than using toLocaleString() because toLocaleString() method needs to check out the localization (country) selected by your computer or JavaScript engine first before formatting the number.
When you’re handling a huge request to format numbers with commas, it’s probably better to use regex pattern and String.replace() method instead of toLocaleString() method.
In most cases, you will want to format numbers in JavaScript with commas, especially when the numbers are large.
Reading large numbers is a lot easier when there are commas in them.
In this post, we'll learn how to format numbers in JavaScript with commas.
toLocaleString()
The best way to format numbers in JavaScript is to use the toLocaleString() method. This method exists on the Number object and will return a string with the number formatted with commas.
If you live in the US, you can pass the method a locale string of en-US to format the number with commas.
Let's look at how to format a number with commas in JavaScript:
const number = 123456789; const formattedNumber = number.toLocaleString("en-US"); console.log(formattedNumber); // 1,234,567,890It even works for floating point numbers:
The great thing about using toLocaleString() is that it will work for any locale. If you want to format a number with periods like in Germany, you can pass the method a locale string of de-DE to format the number with periods.
Here's an example of that:
const number = 123456789; const formattedNumber = number.toLocaleString("de-DE"); console.log(formattedNumber); // 123.456.789How cool is that? Now you can format numbers in JavaScript with commas or periods, depending on the locale.
Conclusion
In this post, we took a look at how to format numbers in JavaScript with commas. We also looked at how to format numbers with periods, by simply passing the toLocaleString() method a different locale string.
Hopefully, this has helped you understand how to format numbers in JavaScript.
Thanks for reading!
- Join
- Share
- Tweet
- Share
Give feedback on this page!