Formatting numbers, money and text with Intl

Why not format by hand?

Formatting looks easy until you meet real users. India groups digits as 12,34,567 (lakhs and crores) while the US writes 1,234,567. Germany writes 1.234.567,50. Some languages have several plural forms. Writing all of this yourself is slow and full of bugs. The Intl object, built into every modern browser and Node.js, already knows these rules.

Locales

A locale is a code for a language and region: 'en-IN' (English, India), 'hi-IN' (Hindi, India), 'en-US', 'de-DE'. Intl uses it to choose the right format.

Intl.NumberFormat

const inr = new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' });
console.log(inr.format(1234567.5));     // '₹12,34,567.50'
console.log(new Intl.NumberFormat('en-IN').format(123456));  // '1,23,456'
console.log(new Intl.NumberFormat('en-US').format(123456));  // '123,456'
console.log(new Intl.NumberFormat('en-IN', { notation: 'compact' }).format(1500000)); // '15L'
console.log(new Intl.NumberFormat('en-IN', { style: 'percent' }).format(0.18));      // '18%'

Create the formatter once and reuse it; creating a new NumberFormat for every row of a big table is slow.

Plurals and relative times

const rules = new Intl.PluralRules('en');
const word = (n) => (rules.select(n) === 'one' ? 'ticket' : 'tickets');
console.log(`1 ${word(1)}, 3 ${word(3)}`);   // 1 ticket, 3 tickets

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'day'));    // 'yesterday'
console.log(rtf.format(3, 'hour'));    // 'in 3 hours'

Sorting text properly: Intl.Collator

The default sort compares character codes, so capital letters come before small letters and accented letters go to the end. A collator compares the way people expect in a language.

const names = ['Zoya', 'arjun', 'Émile'];
console.log([...names].sort());                                   // ['Zoya', 'arjun', 'Émile']
console.log([...names].sort(new Intl.Collator('en').compare));    // ['arjun', 'Émile', 'Zoya']
console.log('a'.localeCompare('B', 'en'));                        // -1 (a comes before B)

Quick helpers: toLocaleString

Numbers and Dates have toLocaleString(locale, options), a shortcut that uses Intl underneath: (1234567).toLocaleString('en-IN') gives '12,34,567'. Fine for one-off use; reuse a formatter object in loops.

Dates in Indian languages

The same Intl.DateTimeFormat you met in the last topic works for Indian languages too. With the locale 'hi-IN' the month names come out in Hindi, and with 'ta-IN' in Tamil. You do not need a translation table for month or weekday names; the browser or Node.js already has them. Pass the user's preferred locale (for example from a settings page) into one helper function and use it everywhere, so a single change switches the whole app.

const when = new Date(Date.UTC(2026, 7, 15, 4, 30));
const opts = { timeZone: 'Asia/Kolkata', day: 'numeric', month: 'long', year: 'numeric' };
console.log(new Intl.DateTimeFormat('en-IN', opts).format(when)); // '15 August 2026'
console.log(new Intl.DateTimeFormat('hi-IN', opts).format(when)); // the same date with the month name in Hindi