How to Format Currency in JavaScript: Code Examples for USD, EUR, and More

Recent Trends in Currency Formatting

Over the past few years, the JavaScript ecosystem has increasingly moved away from manual string concatenation and locale-specific libraries toward native internationalization APIs. The Intl.NumberFormat object, standardized in ECMAScript Internationalization API (ECMA-402), now provides a consistent way to format currency according to region and currency code. Developers commonly request practical examples for USD, EUR, JPY, GBP, and other major currencies, often seeking to handle decimal precision, symbol placement, and grouping separators automatically.

Background: The Rise of Intl.NumberFormat

Before Intl.NumberFormat, developers relied on libraries like accounting.js, custom functions, or server-side formatting. The ECMAScript Internationalization API, first widely supported around 2016, introduced a native method that respects the user’s browser locale and the specified currency. Key capabilities include:

• Automatic symbol insertion (€, $, ¥, £, etc.)
• Locale-aware grouping (e.g., 1,234.56 vs. 1.234,56)
• Configurable decimal places via minimumFractionDigits and maximumFractionDigits
• Support for currency codes defined by ISO 4217

User Concerns: Common Pitfalls and Misunderstandings

Developers often encounter issues when working with currency formatting in JavaScript. Key concerns include:

• Locale vs. Currency Confusion: Specifying a locale (e.g., en-US) does not force a currency symbol—you must also set currency: 'USD'. Conversely, the locale influences grouping and decimal separators, not the currency itself.
• Decimal Precision: For currencies like JPY (Japanese Yen) that have zero decimal places, forgetting to adjust minimumFractionDigits can yield unwanted .00 suffixes.
• Currency Symbol Override: Some developers want to display a custom symbol (e.g., “CA$” for Canadian dollars in U.S. context). Intl.NumberFormat does not allow symbol customization—workarounds involve string replacement after formatting.
• Fallback Behavior: Not all locales support every currency. In such cases, the API may substitute with a generic format or fall back to the locale’s default currency.

Likely Impact: Simpler Code and Better UX

The adoption of native currency formatting reduces dependency on external libraries and lowers the risk of locale-specific bugs. For products targeting international audiences, consistent formatting across regions improves user trust. The API also performs well in modern browsers and Node.js environments, making it suitable for both client-side and server-side rendering. Teams can now write a single formatting function that behaves correctly for many currencies without case-by-case logic.

What to Watch Next

Several developments could shape currency formatting in JavaScript going forward:

• Stage 3 Proposal: Intl.NumberFormat v3 – Proposed extensions include rounding modes, sign display options, and compact notation for large amounts. If ratified, these features would give developers finer control over number display.
• Browser Support for New Locales – As the Unicode CLDR (Common Locale Data Repository) expands, more locale-specific currency formatting variants become available, particularly for African and Middle Eastern currencies.
• Integration with Payment APIs – As e-commerce and fintech apps adopt Web Payments and other standards, the need for reliable currency formatting in JavaScript will grow, potentially leading to stricter validation requirements.
• TypeScript and Static Typing – Helper types for Intl.NumberFormat options (e.g., union types for currency codes) may become standard in type definitions, reducing runtime errors.