الويب و HTML

JavaScript Intl API

ECMAScript Internationalization API providing locale-aware string comparison (Collator), number formatting (NumberFormat), date formatting (DateTimeFormat), and segmentation (Segmenter).

What is the JavaScript Intl API?

The JavaScript Internationalization API (Intl) is a built-in namespace introduced in ECMAScript 2015 (ES6) that provides locale-sensitive operations without requiring external libraries. It wraps the ICU (International Components for Unicode) library available in V8, SpiderMonkey, and other engines, exposing collation, number formatting, date/time formatting, text segmentation, and more.

Intl.Collator — Locale-Aware Sorting

Intl.Collator compares strings according to locale-specific rules, making it essential for any sorted list that will be displayed to users in their language.

const collator = new Intl.Collator("de", { sensitivity: "base" });
["München", "Berlin", "Ärger"].sort(collator.compare);
// → ["Ärger", "Berlin", "München"]  (German alphabetical order)

The sensitivity option controls whether accents and case differences matter: "base" ignores both, "accent" ignores only case, "case" ignores only accents, and "variant" (default) considers both.

Intl.NumberFormat — Numbers, Currencies, Units

Intl.NumberFormat formats numbers according to locale conventions, handling decimal separators (period vs comma), digit grouping, currency symbols, and measurement units.

new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
  .format(1234567.89);
// → "1.234.567,89 €"

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

Intl.DateTimeFormat — Dates and Times

new Intl.DateTimeFormat("ja-JP", { dateStyle: "full", timeStyle: "short" })
  .format(new Date("2024-06-15"));
// → "2024年6月15日土曜日 0:00"

The calendar option supports non-Gregorian calendars: "islamic", "hebrew", "chinese", "buddhist", and others. The timeZone option accepts IANA time zone identifiers.

Intl.Segmenter — Grapheme, Word, Sentence Boundaries

Intl.Segmenter is one of the most powerful features in the Intl API. It splits text into grapheme clusters, words, or sentences using locale-aware rules from UAX#29.

const seg = new Intl.Segmenter("en", { granularity: "grapheme" });
[...seg.segment("e\u0301")].length;  // 1 grapheme cluster (é)

const wordSeg = new Intl.Segmenter("ja", { granularity: "word" });
const words = [...wordSeg.segment("日本語のテキスト")];
// Correctly splits Japanese text without spaces

Intl.DisplayNames — Human-Readable Names for Codes

Intl.DisplayNames translates ISO language codes, region codes, script codes, and currency codes into human-readable names in any locale.

const dn = new Intl.DisplayNames("ko", { type: "language" });
dn.of("en");  // → "영어"
dn.of("ja");  // → "일본어"

const regions = new Intl.DisplayNames("fr", { type: "region" });
regions.of("JP");  // → "Japon"

Quick Facts

Class Purpose
Intl.Collator Locale-sensitive string comparison and sorting
Intl.NumberFormat Numbers, currencies, percentages, units
Intl.DateTimeFormat Dates, times, calendars, time zones
Intl.Segmenter Grapheme / word / sentence segmentation
Intl.DisplayNames Human-readable names for language/region codes
Intl.PluralRules Plural category selection (one/few/many/other)
Intl.RelativeTimeFormat "3 days ago", "in 2 weeks"
Underlying library ICU (International Components for Unicode)
Specification ECMA-402 (Internationalization API Specification)

المصطلحات ذات الصلة

المزيد في الويب و HTML