Number Formatting with Intl in JavaScript
Use JavaScript's Intl.NumberFormat to format currency, percentages, and units for any locale.
Published:
Tags: JavaScript number formatting Intl, Intl.NumberFormat JavaScript, JS currency formatter
Number Formatting with Intl in JavaScript formats numbers for any locale, handling thousands separators, decimals, currency symbols, percentages, and units automatically. Unlike , which creates a formatter on each individual call, is fully reusable and efficient for formatting many numbers in tables and dashboards. --- What about Basic Usage? What is the Constructor syntax? Locale: A BCP 47 language tag string or array. Pass to use the runtime's default locale. Options: An object with formatting directives. What about Formatting Styles? Decimal (default) Currency Percent Unit (ES2020+) The style formats physical quantities using CLDR unit identifiers: See the CLDR unit identifiers list for the full set of supported units. What about Notation Options? What about Significant Digits? What…
Frequently Asked Questions
How do I use Intl.NumberFormat in JavaScript?
Create a formatter: const formatter = new Intl.NumberFormat('en-US', options). Call formatter.format(number) to get the formatted string. The first argument is a BCP 47 locale string ('en-US', 'de-DE', 'ja-JP'). Options control style (decimal, currency, percent, unit), decimal places, and notation.
How do I format currency in JavaScript?
Use Intl.NumberFormat with style: 'currency' and the ISO 4217 currency code: new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.56) → '$1,234.56'. For EUR in German: new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.56) → '1.234,56 €'. The currency symbol placement is locale-appropriate automatically.
How do I format large numbers with commas in JavaScript?
new Intl.NumberFormat('en-US').format(1234567) → '1,234,567'. The formatter adds thousands separators appropriate to the locale. For Indian numbering (lakhs/crores): new Intl.NumberFormat('en-IN').format(1234567) → '12,34,567'. For no grouping: new Intl.NumberFormat('en-US', { useGrouping: false }).format(1234567) → '1234567'.
How do I format percentage in JavaScript?
new Intl.NumberFormat('en-US', { style: 'percent' }).format(0.75) → '75%'. Note: the input is a fraction (0.75 for 75%), not the percentage value (75). To control decimal places: new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 1 }).format(0.756) → '75.6%'.
What is the difference between toLocaleString and Intl.NumberFormat?
Number.prototype.toLocaleString() internally uses Intl.NumberFormat and accepts the same arguments: (1234.56).toLocaleString('en-US', { style: 'currency', currency: 'USD' }). The difference: Intl.NumberFormat creates a reusable formatter object, which is more efficient when formatting many numbers. toLocaleString creates a new formatter internally each call. For single values, toLocaleString is more concise; for batches, use Intl.NumberFormat.
All articles · theproductguy.in