Intl API Locale Codes — JavaScript Internationalization

Guide to using BCP 47 locale codes with JavaScript's Intl API for formatting dates, numbers, currencies, and display names.

Web Development

Detailed Explanation

The JavaScript Intl API

The Intl object is the namespace for the ECMAScript Internationalization API. It provides language-sensitive string comparison, number formatting, date formatting, and more — all driven by BCP 47 locale identifiers.

Core Intl Constructors

Constructor Purpose Example
Intl.DateTimeFormat Format dates/times new Intl.DateTimeFormat("ja-JP")
Intl.NumberFormat Format numbers/currencies new Intl.NumberFormat("de-DE")
Intl.DisplayNames Localized names new Intl.DisplayNames(["en"])
Intl.RelativeTimeFormat Relative time "3 days ago"
Intl.ListFormat List formatting "A, B, and C"
Intl.Collator String comparison locale-aware sorting
Intl.Segmenter Text segmentation word/sentence boundaries

Locale Resolution

The Intl API performs locale negotiation to find the best available locale:

// Request Japanese, fall back to English
const fmt = new Intl.DateTimeFormat(["ja-JP", "en-US"]);
console.log(fmt.resolvedOptions().locale); // "ja-JP" (if available)

Practical Examples

Date formatting by locale:

const date = new Date("2026-02-28");
new Intl.DateTimeFormat("en-US").format(date); // "2/28/2026"
new Intl.DateTimeFormat("ja-JP").format(date); // "2026/2/28"
new Intl.DateTimeFormat("de-DE").format(date); // "28.2.2026"

Currency formatting:

const opts = { style: "currency", currency: "USD" };
new Intl.NumberFormat("en-US", opts).format(1234.5); // "$1,234.50"
new Intl.NumberFormat("ja-JP", opts).format(1234.5); // "$1,234.50"
new Intl.NumberFormat("de-DE", opts).format(1234.5); // "1.234,50 $"

Display names:

const dn = new Intl.DisplayNames(["en"], { type: "language" });
dn.of("ja"); // "Japanese"
dn.of("zh-Hans"); // "Simplified Chinese"
dn.of("sr-Latn"); // "Serbian (Latin)"

Browser Support

All Intl constructors are supported in every modern browser (Chrome 24+, Firefox 29+, Safari 10+, Edge 12+). Intl.Segmenter is the newest addition (Chrome 87+, Safari 15.4+).

Use Case

Use the Intl API whenever you need locale-aware formatting in client-side JavaScript. It eliminates the need for heavy locale libraries like moment.js or numeral.js for basic formatting tasks. It is especially useful in React, Vue, or Angular apps that need to display dates, numbers, or currencies in the user's locale.

Try It — Language Code Reference

Open full tool