Thursday, March 7, 2024

Format Numbers with Commas in JavaScript

Must read


Introduction

Dealing with numbers in numerous codecs is a typical activity for a lot of developer, particularly these working with UI/UX. A type of duties is displaying numbers in a extra human-readable kind, like separating digits with commas. Whether or not it is for a monetary software, displaying stats on a dashboard, or merely making massive numbers extra digestible, formatting numbers with commas can assist enhance person expertise. On this article, we’ll discover varied methods to carry out this activity, even throwing in a few widespread library strategies to make the job simpler.

Native JavaScript Strategies

One of many easiest methods to format numbers with commas is by utilizing the native toLocaleString methodology:

const quantity = 1234567.89;
const formattedNumber = quantity.toLocaleString();
console.log(formattedNumber); // Outputs: "1,234,567.89"

This methodology robotically codecs the quantity in line with the person’s locale, making it a wonderful alternative for internationalization. For my locale, it makes use of commas after each third digit.

Notice: We’re used to seeing numbers, just like the one proven above, introduced with solely two digits after the decimal when displayed as forex. Nonetheless, remember that toLocaleString() will preserve all digits after the decimal. So 1234567.890123 would turn out to be “1,234,567.890123”.

Utilizing Common Expressions

In case you want a bit extra management over the formatting, common expressions can assist:

operate formatNumberWithCommas(quantity) {
    return quantity.toString().change(/B(?=(d{3})+(?!d))/g, ",");
}

const quantity = 1234567.89;
console.log(formatNumberWithCommas(quantity)); // Outputs: "1,234,567.89"

Hyperlink: This operate makes use of common expressions to insert commas after each third digit from proper to left, offering the specified formatting. Common expressions are a robust software, however they could appear advanced to these unfamiliar with them. You may learn extra about common expressions in JavaScript in our article, Information to Common Expressions and Matching Strings in JavaScript.

Utilizing the Lodash Library

In case you favor utilizing libraries and occur to be a fan of Lodash, the favored utility library supplies a _.comma methodology which may do the job:

const _ = require('lodash');

const quantity = 1234567.89;
const formattedNumber = _.comma(quantity);
console.log(formattedNumber); // Outputs: "1,234,567.89"

Conclusion

Formatting numbers with commas is a typical requirement, enhancing the readability and general person expertise. Whereas JavaScript supplies native strategies like toLocaleString, it’s also possible to obtain this by common expressions and even make use of libraries like Lodash. The strategy you select could rely in your particular wants and the context through which you are working. What’s necessary is that you just now have the instruments at your disposal to make these massive, unwieldy numbers slightly extra pleasant to the human eye.



Supply hyperlink

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article