Internationalization API

Number formatting, date formatting, pluralization, and locale support.

Overview

The Intl API provides locale-sensitive formatting and comparison.

Key Concepts

• NumberFormat — Locale-aware number formatting
• DateTimeFormat — Locale-aware date formatting
• Collator — Locale-aware string comparison
• PluralRules — Handle pluralization
• RelativeTimeFormat — Relative time strings

Code Examples

<div id="output"></div>

<script>
const output = document.getElementById('output');
const locale = navigator.language;

function log(label, value) {
  output.innerHTML += `<div><strong>${label}:</strong> ${value}</div>`;
}

// Number formatting
const number = 1234567.89;

const currencyFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'USD'
});
log('Currency (USD)', currencyFormatter.format(number));

const percentFormatter = new Intl.NumberFormat(locale, {
  style: 'percent',
  minimumFractionDigits: 2
});
log('Percent', percentFormatter.format(0.856));

const compactFormatter = new Intl.NumberFormat(locale, {
  notation: 'compact',
  compactDisplay: 'long'
});
log('Compact', compactFormatter.format(number));

// Date formatting
const date = new Date();

const dateFormatter = new Intl.DateTimeFormat(locale, {
  dateStyle: 'full',
  timeStyle: 'short'
});
log('Date & Time', dateFormatter.format(date));

const relativeFormatter = new Intl.RelativeTimeFormat(locale, {
  numeric: 'auto'
});
log('Yesterday', relativeFormatter.format(-1, 'day'));
log('Next week', relativeFormatter.format(1, 'week'));

// Pluralization
const pluralFormatter = new Intl.PluralRules(locale);

const items = [0, 1, 2, 5];
items.forEach(count => {
  const category = pluralFormatter.select(count);
  log(`${count} items`, `${count} ${category === 'one' ? 'item' : 'items'}`);
});

// List formatting
const listFormatter = new Intl.ListFormat(locale, {
  style: 'long',
  type: 'conjunction'
});
const fruits = ['apples', 'bananas', 'oranges'];
log('Fruits', listFormatter.format(fruits));
</script>

Practice

Build a multi-currency converter using the Intl.NumberFormat API.