Formatting numbers as currency is a common requirement when building applications that deal with financial data.
Whether you are displaying prices, totals, or transaction amounts, proper currency formatting improves user experience and ensures clarity.
In this article, you will learn how to format currency in JavaScript using different techniques, from built-in methods to more customizable solutions.
Method 1: Using toLocaleString()
The easiest and most effective way to format currency in JavaScript is by using the toLocaleString() method.
This method automatically handles currency symbols, separators, and decimal places based on the specified locale and currency code.
Syntax:
1 2 3 | number.toLocaleString(locale, { style: 'currency', currency: 'USD' }) |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 | const amount = 123456.789; console.log(amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' })); // Output: $123,456.79 console.log(amount.toLocaleString('en-GB', { style: 'currency', currency: 'GBP' })); // Output: £123,456.79 console.log(amount.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); // Output: 123.456,79 € |
✅ toLocaleString() automatically adjusts to the correct decimal and thousand separators based on the user’s locale.
Method 2: Custom Currency Formatter Function
For greater control, you can build a custom currency formatter.
This is especially useful when you want a consistent format regardless of the user’s browser locale.
Example:
1 2 3 4 5 6 7 8 | function formatCurrency(amount, currencySymbol = '$') { return currencySymbol + amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","); } console.log(formatCurrency(123456.789)); // Output: $123,456.79 console.log(formatCurrency(98765.432, '€')); // Output: €98,765.43 |
🔹 This approach gives you full flexibility over how the currency is displayed.
Method 3: Using Intl.NumberFormat
The Intl.NumberFormat API is another powerful way to format numbers as currency.
It provides advanced internationalization support and is widely used in production applications.
Example:
1 2 3 4 5 6 7 8 9 | const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }); console.log(formatter.format(123456.789)); // Output: $123,456.79 |
You can also dynamically change the locale and currency:
1 2 3 4 5 6 7 8 | function formatDynamicCurrency(amount, locale, currency) { return new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(amount); } console.log(formatDynamicCurrency(123456.789, 'ja-JP', 'JPY')); // Output: ￥123,457 |
🔹 Intl.NumberFormat is perfect for apps targeting multiple regions and currencies.
Bonus: Formatting Without Cents
Sometimes you might want to display the currency amount without decimals (no cents).
Example:
1 2 3 4 5 6 7 8 9 10 11 12 | const amount = 123456.789; const formatted = amount.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); console.log(formatted); // Output: $123,457 |
🔹 Useful for currencies like Japanese Yen, where cents are not typically shown.
Conclusion
In JavaScript, formatting numbers as currency can be easily accomplished using methods like toLocaleString(), Intl.NumberFormat, or custom functions depending on your needs.
Choosing the right method ensures that your application displays financial data in a clear, professional, and localized manner.
By mastering these techniques, you’ll greatly enhance your app’s usability and global appeal. 🚀
