Localizing Dates, Numbers & Currencies with Intl API

Technical Deep Dive & Specifications

The Native Intl Namespace

The global Intl object serves as the namespace for ECMAScript Internationalization APIs:

+-----------------------------------------------------------------------------------------+
|                                    INTL API SUITE                                       |
+-----------------------------------------------------------------------------------------+
| CONSTRUCTOR                 | PRIMARY RESPONSIBILITY                                    |
+-----------------------------+-----------------------------------------------------------+
| Intl.NumberFormat           | Currency, percentages, scientific, and unit formatting.   |
| Intl.DateTimeFormat         | Localized calendars, timezones, and full/short dates.     |
| Intl.RelativeTimeFormat     | Relative human time ("yesterday", "in 5 minutes").        |
| Intl.PluralRules            | Plural category selection (zero, one, two, few, many).    |
| Intl.ListFormat             | Natural list joining ("apples, bananas, and oranges").    |
| Intl.DisplayNames           | Localized region, language, and currency names.           |
+-----------------------------------------------------------------------------------------+

1. Intl.NumberFormat (Currencies, Units & Numbering Systems)

// ISO 4217 Currency Formatting
const formatPrice = (amount, locale, currency) => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency,
    currencyDisplay: 'symbol' // 'symbol', 'narrowSymbol', 'code', 'name'
  }).format(amount);
};

formatPrice(49.99, 'en-US', 'USD'); // "$49.99"
formatPrice(49.99, 'de-DE', 'EUR'); // "49,99 €"
formatPrice(5000, 'ja-JP', 'JPY');  // "￥5,000"
formatPrice(120.5, 'ar-SA', 'SAR'); // "١٢٠٫٥٠ ر.س."

Localized Measurement Units:

new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilometer-per-hour' }).format(100);
// "100 km/h"

new Intl.NumberFormat('fr-FR', { style: 'unit', unit: 'liter', unitDisplay: 'long' }).format(2.5);
// "2,5 litres"

2. Intl.DateTimeFormat & Semantic HTML <time>

In semantic HTML, dates displayed on screen must be human-readable, but the underlying <time> element must provide a standardized ISO 8601 machine-readable datetime attribute for search engines and calendars.

<!-- HTML Semantic Backbone -->
<time datetime="2026-08-21T14:30:00Z" id="event-date">
  <!-- Dynamic human string populated by Intl.DateTimeFormat -->
</time>

const isoString = '2026-08-21T14:30:00Z';
const date = new Date(isoString);

// Full localized date and time in Tokyo time zone
const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'Asia/Tokyo'
});
console.log(jaFormatter.format(date));
// "2026年8月21日金曜日 23:30"

// German formatting in Berlin time zone
const deFormatter = new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'long',
  timeZone: 'Europe/Berlin'
});
console.log(deFormatter.format(date));
// "21. August 2026"

3. Intl.RelativeTimeFormat

Computes relative timestamps dynamically without date calculation libraries:

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

rtf.format(-1, 'day');   // "yesterday" (due to numeric: 'auto')
rtf.format(-3, 'day');   // "3 days ago"
rtf.format(2, 'hour');   // "in 2 hours"

const rtfEs = new Intl.RelativeTimeFormat('es-ES', { numeric: 'auto' });
rtfEs.format(-1, 'day'); // "ayer"
rtfEs.format(-3, 'day'); // "hace 3 días"

4. Intl.PluralRules (Solving Complex Multi-Grammar Plurals)

In English, pluralization is simple: 1 item (singular) vs N items (plural). But in Arabic, Russian, Polish, and Czech, plural grammar rules are complex:

+-------------------------------------------------------------------------------+
|                            PLURAL CATEGORIES (CLDR)                           |
+-------------------------------------------------------------------------------+
| CATEGORY | ENGLISH (en)    | POLISH (pl)               | ARABIC (ar)          |
+----------+-----------------+---------------------------+----------------------+
| zero     | -               | -                         | 0 items (صفر)        |
| one      | 1 item          | 1 miesiąc                 | 1 item (واحد)        |
| two      | -               | -                         | 2 items (اثنان)      |
| few      | -               | 2, 3, 4 miesiące          | 3-10 items (قليل)    |
| many     | -               | 5-21, 25-31 miesięcy      | 11-99 items (كثير)   |
| other    | 0, 2, 3... items| 1.5, 2.5 miesięcy         | 100+ items (أخرى)    |
+-------------------------------------------------------------------------------+

const getPluralForm = (count, locale) => {
  const pr = new Intl.PluralRules(locale);
  const rule = pr.select(count); // 'zero', 'one', 'two', 'few', 'many', 'other'
  return rule;
};

console.log(getPluralForm(2, 'en')); // "other"
console.log(getPluralForm(2, 'ar')); // "two"
console.log(getPluralForm(3, 'pl')); // "few"
console.log(getPluralForm(5, 'pl')); // "many"

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 50–57 (<select id="locale-select">): Offers a selection of BCP 47 locale tags (en-US, de-DE, ja-JP, ar-SA, hi-IN).
• Line 87 (document.documentElement.dir = isRtl ? 'rtl' : 'ltr';): Dynamically updates the HTML document direction to match the chosen locale.
• Lines 93–97 (new Intl.DateTimeFormat(locale, ...)): Parses the standardized ISO 8601 string and converts it to a culturally formatted date and time in the user's selected locale.
• Lines 100–103 (new Intl.NumberFormat(locale, { style: 'currency', currency: ... })): Converts raw numbers to regional currencies, properly placing symbols, thousand grouping commas/dots, and suppressing decimals for currencies without cents (like JPY).
• Line 107 (<time datetime="${tx.isoDate}">${formattedDate}</time>): Emits accessible, SEO-friendly HTML <time> tags pairing machine-readable ISO timestamps with localized text.

Expected Browser Render Output

• Selecting German (de-DE): Amounts render with trailing euro symbols and decimal commas (e.g., 1.450,75 $, 3.200,00 €, 540.000 ¥).
• Selecting Japanese (ja-JP): JPY renders with currency symbol prefix ￥540,000 with no decimal zeros.
• Selecting Arabic (ar-SA): Entire table mirrors to RTL, numbers render in Eastern Arabic digits (e.g. ١٤٥٠٫٧٥ $), and dates appear with Arabic month names.