Number Formatter

Why "1,234.50" Is a Cultural Statement

The way a number is written reveals where it expects to be read. In the United States, 1,234.50 is standard. In Germany, it's 1.234,50. In France, it's 1 234,50. In India, very large numbers use a different grouping entirely: 12,34,567.50 (lakh/crore system). All of these are correct for their region; all look broken everywhere else. Intl.NumberFormat, built into every modern JavaScript runtime, encapsulates this complexity. This tool exercises it.

What Intl.NumberFormat Does

The API takes a locale tag and an options object, returns a formatter:

Under the hood, the browser ships the CLDR (Common Locale Data Repository), Unicode's authoritative database of locale conventions. Hundreds of locales, each with rules for separators, decimal markers, currency symbol positions, negative formatting, plural forms, and more. Every modern browser bundles it.

The Twelve Styles

1. Decimal. The default. 1,234.567. Configurable decimal places via minimumFractionDigits / maximumFractionDigits.

2. Currency. { style: 'currency', currency: 'USD' }. Renders with currency symbol per locale convention. The currency code (USD, EUR, JPY) is mandatory, locale alone isn't enough because a French speaker might want USD ('1 234,50 $US') or EUR ('1 234,50 €').

3. Percent. { style: 'percent' }. Multiplies by 100 and appends a localized percent symbol. 0.25 becomes 25% in en-US, 25 % in fr-FR.

4. Unit. { style: 'unit', unit: 'kilometer-per-hour' }. SI and customary units, localized. 100 becomes 100 km/h in en-US, 100 km/h in fr-FR, 100 公里/小時 in zh-TW.

5. Compact (short). { notation: 'compact' }. 12345 → 12K. Localized abbreviations: Mio. in German, 万/億 in Japanese.

6. Compact (long). { notation: 'compact', compactDisplay: 'long' }. 12345 → 12 thousand. Useful for accessibility and screen readers.

7. Scientific. { notation: 'scientific' }. 12345 → 1.2345E4.

8. Engineering. { notation: 'engineering' }. 12345 → 12.345E3. Exponents are multiples of 3.

9. Accounting. { style: 'currency', currencySign: 'accounting' }. Negatives in parentheses: -1234.5 → ($1,234.50). Standard in financial reports.

10. Signed. { signDisplay: 'always' }. Always shows sign: +1,234.50 / -1,234.50. Variants: exceptZero (sign except for 0), negative (only negatives), never.

11. Grouping off. { useGrouping: false }. No separators: 1234567 instead of 1,234,567. Useful when the number's going into a form input or a serialized output.

12. Ordinal. Via Intl.PluralRules with type: 'ordinal'. Returns 'one'/'two'/'few'/'many'/'other'/'two', which you then map to suffixes for the locale: 1st, 2nd, 3rd in en-US.

Locale-Specific Quirks Worth Knowing

India: lakh/crore grouping. Indian English (en-IN) and Hindi (hi-IN) group by 2 digits after the first 3: 12,34,567 not 1,234,567. The first comma is at 3, then every 2 thereafter. Stores, financial reports, and government documents use this. Default en doesn't.

Arabic: digit shapes. ar-EG returns Eastern Arabic numerals by default (١٢٣٤٥), not Latin (12345). You can override with { numberingSystem: 'latn' } if you need Latin digits in an Arabic context.

Chinese: full-width characters. Some Chinese locales render decimal markers as full-width characters that take more visual space than Latin punctuation. Layout designers must account for this.

Japanese compact: 万 (10,000), 億 (100,000,000), 兆 (1,000,000,000,000). Western K/M/B don't map cleanly to Japanese tens-of-thousands grouping. 12,345,678 is 1,234万5678 in long form, 1234万 compact.

Swiss German: apostrophe as thousands separator. 1'234.50. Not a typo; the official Swiss convention. de-CH produces it.

Currency symbol placement. Most languages put the symbol before in English-influenced locales (USD, GBP) and after in European-influenced (EUR is split, Germany: 50 €, France: 50 €, but Ireland: €50). Trust the locale; never hand-place.

Common Bugs This Solves

• Hardcoded $ prefix. Works in English-speaking countries; embarrassing everywhere else. Use { style: 'currency', currency: 'USD' } and the locale.
• .toFixed(2). Loses grouping, loses locale awareness, and silently produces Number.MAX_SAFE_INTEGER overflow for big numbers. Use Intl.NumberFormat with maximumFractionDigits: 2.
• Locale taken from navigator.language without fallback. Some browsers return weird values. Always fall back to a known default.
• Currency formatting in two locales sharing EUR. German and French both use EUR but display differently. Currency alone isn't enough; you need the user's locale.
• Number-to-string for serialization. Intl.NumberFormat produces strings with separators that can't be parsed back. For serialization (saving to DB, sending in JSON), use raw .toString() or JSON.stringify. Format only at the display boundary.

Performance: Cache Your Formatters

new Intl.NumberFormat(...) is not free, the constructor initializes locale data, which can be slow on cold caches. For repeated formatting (a table with 1000 rows), instantiate the formatter once and call .format() per value:

Don't new Intl.NumberFormat inside a render function called 60 times per second.

Privacy

Intl.NumberFormat is a built-in browser API; the formatter calls it locally. Your input numbers, sometimes financial figures, internal revenue, payroll, never leave the tab. Open DevTools Network during use: zero outbound requests.