Currency formatting turns numeric monetary values into readable display strings. In financial interfaces, it protects the user experience from missing trailing zeros, unclear separators, and amounts that do not match stakeholder expectations. APIs often return minimally formatted numbers so the interface can apply the appropriate currency and locale conventions. section 6.4
Implement currency formatting incrementally:
- Start with representative data, including decimal values, trailing-zero cases, and amounts above 999. section 6.4
- Use basic formatting for a fixed display, such as adding a dollar sign and applying toFixed(2). section 6.4
- Centralize reusable behavior in a formatCurrency function backed by Intl.NumberFormat, with currency and locale parameters. section 6.4
- Replace inline rendering with the utility and test trailing zeros, default USD behavior, and comma separators. section 6.4
- Reuse the same utility for chart ticks when business requirements call for currency-formatted axes. section 6.7.3
Formatting ACH totals
An ACH upload table can display creditAmount 1866.90 and debitAmount 1234.10 as $1,866.90 and $1,234.10. A shared formatter keeps table cells and chart ticks consistent. section 6.4 section 6.7.3
Listing 6.15 Wrapper for Intl.NumberFormat
export function formatCurrency(value: number, #1
currency: string = "USD", #2
locale: string = 'en-US'): string { #3
return new Intl.NumberFormat(locale, { #4
style: 'currency', #4
currency: currency #4
}).format(value); #4
} #4
A compact TypeScript wrapper exposes currency and locale choices while delegating symbol, precision, and grouping rules to Intl.NumberFormat. section 6.4
