What's easier to read?
42936782.783 or $42,936,782.78
Parsing the second value is a lot easier for me.
There's a reason we print currency symbols and delimiters - they make monetary values easier to read in print. The same is true with digital interfaces like the web.
While most of us are not working on applications that require the formatting millions of dollars, we should include region specific formatting any time a number exceeds several digits.
Making an application usable requires readability. It can be difficult to read unformatted numbers and even more difficult to read monetary values without formatting.
Display monetary values in a user's local currency - whether you're building an application with "money numbers" for countries like the United States or India, the entire European Union, or all seven continents & Mars.
For the uninitiated, internationalizing currency values may sound like a weekend project. Fortunately for web developers, JavaScript's built in methods make it easy to format numerical values in the user's local currency.
How to Format Currency with JavaScript
1. Use Intl.NumberFormat
The #1 way to format currency with JavaScript is using Intl.NumberFormat.
This well-supported, built-in method allows developers to format monetary values in a user's local language (including the correct number of decimal values).
Basic Intl.NumberFormat Usage
The basic usage is straightforward. First, create a new NumberFormat object by instantiating a new instance of Intl.NumberFormat,
new Intl.NumberFormat('en-us', { style: 'currency', currency: 'USD' });
then, call .format(NUMBER | STRING) on the returned instance.
The .format() method is cool becuase it can accept either a number or string,
const formatter = new Intl.NumberFormat('en-us', { style: 'currency', currency: 'USD' });
// Calling .format() with a number
formatter.format(12345.6789)
// outputs: "$12,345.68"
// Calling .format() with a string
formatter.format('12345.6789')
// outputs: "$12,345.68"
Intl.NumberFormat in an Application
It's helpful to encapsulate solutions like this in utilty functions when internationalizing applications. A function like this is likely sufficient for United-States-centric applications,
function formatCurrency(value) {
return new Intl.NumberFormat('en-us', { style: 'currency', currency: 'USD' })
.format(value);
}
formatCurrency(12345.6789)
// "$12,345.68"
When supporting multiple countries or currencies, abstracting a function similar to the following may help when formatting money using JavaScript,
function formatCurrency(value, locale, currency) {
return new Intl.NumberFormat(locale, { style: 'currency', currency: currency })
.format(value);
}
const value = 12345.6789;
const locale = 'hi-id';
const currency = 'INR';
formatCurrency(value, locale, currency);
// "₹12,345.68"
These examples focus on developers in India and the United States. If you're support applications in other countires, you'll need to adjust the formatCurrency arguments to support your target locale and currency.
Browser Compatibility
As of July 2022, Intl.NumberFormat has solid modern cross-browser compatibility (IE 11). Check out MDN for the most up to date details.
2. Format Money with JavaScript - Other Options
Using built-in options is preferrable whenever possible. However, some applications may need to support older browsers or provide more fine-grained accounting information.
Check out these Intl.NumberFormat alternatives: