Currency formatting & display

Writing money the local way: symbol before or after, local separators, and the decimal count the currency itself demands (JPY has none).

1.000,50 € versus $1,000.50where does the currency symbol gocurrency symbol placementeuro sign after the numbermoney formattingshowing prices in other currenciescurrency formatinghow to display prices per country

See it

Live demo coming soon

What it is

Money picks up every quirk of number formatting and adds its own. The symbol sits before the amount in the US ($1,000.50) and after it in Germany (1.000,50 €), with a space in some locales and none in others. Decimal count is a property of the currency, not the locale: JPY has none (1250, never 1250.00), most currencies have two, and KWD has three.

Intl.NumberFormat with style 'currency' and an ISO 4217 code does all of that from two inputs: the locale (how to write it) and the currency (what it is). currencyDisplay lets you choose between 'symbol' ($ or CA$), 'narrowSymbol' (always $), 'code' (USD 1,000.50), and 'name' ('1,000.50 US dollars'). For a global audience, ambiguous glyphs are worth disambiguating: plain '$' next to a Canadian or Australian price invites a support ticket.

The misconception that costs real money: formatting is not conversion. Format 1000.50 USD with a de-DE locale and you get '1.000,50 $', a US price written German-style, not euros. Actual price localization means FX rates, rounding to psychological price points, and tax display rules, and it lives with billing, not with your formatter. Also store amounts as integer minor units, since floats and money end in 0.1 + 0.2 territory. Just do not call them cents: the minor-unit exponent is a property of the currency (2 for USD and EUR, 0 for JPY, 3 for KWD), so a stored integer means nothing until you pair it with its ISO 4217 code and scale by that currency's exponent.

Ask AI for it

Add a formatCurrency helper to this app using Intl.NumberFormat with style 'currency', taking an integer minor-unit amount, an ISO 4217 currency code, and the active locale. Look up that currency's minor-unit exponent and scale by it inside the helper rather than assuming two decimal places or calling every minor unit a cent, so JPY (exponent 0) renders 1250 and KWD (exponent 3) renders three decimals. Let the currency drive the decimal count, and use currencyDisplay 'narrowSymbol' for compact table cells and 'code' anywhere a bare $ would be ambiguous. Memoize formatters per locale-currency pair. Do not convert between currencies here: formatting only changes presentation, never the value.

You might have meant

number formattingecmascript internationalization apilocalelocale aware date time formatting

Go deeper