In web development, displaying numbers in a readable format is important. Adding commas every three digits is a common practice for large numbers.
In this article, we will explain how to easily display numbers with comma separators using PHP’s number_format() and JavaScript’s toLocaleString().
Styling numbers with comma separators
When displaying numbers, font size and appearance are also important.
Below is a sample CSS that can be useful when displaying numbers:
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0 0 0;
line-height: 1.8em;
}
h2{
font-size: 18px;
padding-top: 20px;
}
h3{
font-size: 16px;
padding-top: 20px;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
font-size:
}
</style>
Display numbers with comma separators easily using PHP number_format() and JavaScript toLocaleString()
We’ll look at two simple ways:
one using PHP’s number_format() and another using JavaScript’s toLocaleString().
Display numbers with comma separators using PHP number_format()
The number_format() function automatically adds comma separators when you simply pass a number like this: number_format(number).
<h1>Displaying numbers with comma separators using PHP number_format() and JavaScript toLocaleString().</h1>
<h2>Using PHP number_format() to display numbers with comma separators</h2>
<h3>Without comma separators</h3>
<ul>
<li>10000</li>
<li>9</li>
<li>7777777</li>
<li>333</li>
<li>12345678910</li>
</ul>
<h3>With comma separators</h3>
<ul>
<li><?php echo number_format(10000); ?></li>
<li><?php echo number_format(9); ?></li>
<li><?php echo number_format(7777777); ?></li>
<li><?php echo number_format(333); ?></li>
<li><?php echo number_format(12345678910); ?></li>
</ul>
<br>
<hr/>
Display numbers with comma separators using JavaScript toLocaleString()
In JavaScript, you can also easily add commas by using the toLocaleString() method.
HTML example
<h2>Using JavaScript toLocaleString() to display numbers with comma separators</h2>
<h3>Without comma separators</h3>
<ul>
<li>10000</li>
<li>9</li>
<li>7777777</li>
<li>333</li>
<li>12345678910</li>
</ul>
<h3>With comma separators</h3>
<ul class="comma">
<li>10000</li>
<li>9</li>
<li>7777777</li>
<li>333</li>
<li>12345678910</li>
</ul>
JavaScript example
Include the jquery-1.9.1.min.js file. Then simply use Number(value_from_display_area).toLocaleString() to format numbers.
<script src="jquery-1.9.1.min.js"></script>
<script>
$('ul.comma li').each(function(){
var commatxt = $(this).text();
$(this).text(Number(commatxt).toLocaleString());
});
</script>
In JavaScript, the toLocaleString() method formats numbers according to the specified locale.
In this demo, we use jQuery to format all numbers in a list with commas.
Demo page: Display numbers with comma separators using PHP number_format() and JavaScript toLocaleString()
If you want to see it in action, check out the demo page below:
Summary
In this article, we introduced how to display numbers with comma separators using PHP and JavaScript.
By using number_format() or toLocaleString(), you can easily format numbers for better readability.
Improve usability by displaying numbers properly!
* Please use this content at your own risk.
Do not reuse the Google Analytics tag from the demo page’s <head> section.
