A <script type="importmap"> HTML element provides an import map as a JSON string.
An import map controls how the browser should resolve module specifiers when importing JavaScript
modules.
The Intl namespace object contains several constructors as well as functionality common to the internationalization constructors and other language sensitive functions. Collectively, they comprise the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, date and time formatting, and more. See below for some of the Apis. See the docs if you want all.
When using Intl, the following code snippets can be useful:
// Get the page's language from the HTML lang attribute
const pageLocale = document.documentElement.lang || 'en-US'; // Fallback to 'en-US'
// Use the user's preferred language
const browserLocale = navigator.language || 'en-US'; // Fallback to 'en-US'
The Intl.DateTimeFormat object enables language-sensitive date and time formatting.
See docs.
// might also accept a temporal object in the future
console.log(new Intl.DateTimeFormat("en-US").format(date)); // "12/20/2020"
The Intl.DisplayNames object
enables the consistent translation of language, region and script display names.
See docs.
// two-letter ISO 3166 region code, or a three-digit UN M49 geographic region
const regionNamesInEnglish = new Intl.DisplayNames(["en"], { type: "region" });
regionNamesInEnglish.of("US"); // "United States"
regionNamesInEnglish.of("419"); // "Latin America"
regionNamesInEnglish.of("BZ"); // "Belize"
The Intl.Listformat object enables language-sensitive list formatting.
See docs.
const vehicles = ["Motorcycle", "Bus", "Car"];
const enConjunctionFormatter = new Intl.ListFormat("en", { style: "long", type: "conjunction" });
const deDisjunctionFormatter = new Intl.ListFormat("en", { style: "long", type: "disjunction" });
enConjunctionFormatter.format(vehicles); // "Motorcycle, Bus, and Car"
deDisjunctionFormatter.format(vehicles); // "Motorcycle, Bus oder Car"
The Intl.NumberFormat object enables language-sensitive number formatting.
See docs.
const number = 123456.789;
const deNumberFormat = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });
const jaNumberFormat = new Intl.NumberFormat("ja-JP", { style: "currency", currency: JPY" });
deNumberFormat.format(number); // "123.456,79 €"
jaNumberFormat.format(number); // "￥123,457"
// The Japanese yen doesn't use a minor unit
The Intl.PluralRules ocale-aware object that tells you
which of the language's pluralization rules apply based on a given number.
Languages use different patterns for expressing both plural numbers of items (cardinal numbers)
and for expressing the order of items (ordinal numbers).
See docs.
// The full set of tags that might be returned are:
// zero, one, two, few, many, and other (the "general" plural form, also used if the language only has one form).
const enOrdinalRules = new Intl.PluralRules('en-US', { type: "ordinal" });
console.log(enCardinalRules.select(0)); // "other"
console.log(enCardinalRules.select(1)); // "one"
console.log(enCardinalRules.select(2)); // "two"
console.log(enCardinalRules.select(3)); // "few"
// when you provide a mapping table you can create the right pluralizations:
const enSuffixes = new Map([
["one", "st"],
["two", "nd"],
["few", "rd"],
["other", "th"],
]);
const arEgPluralRules = new Intl.PluralRules('ar-EG', { type: "ordinal" });
console.log(arCardinalRules.select(0)); // "other"
console.log(arCardinalRules.select(1)); // "other"
console.log(arCardinalRules.select(2)); // "other"
console.log(arCardinalRules.select(4)); // "other"
The Intl.RelativeTimeFormat object enables language-sensitive relative
time formatting.
const rtf1 = new Intl.RelativeTimeFormat("en", { style: "short" });
console.log(rtf1.format(3, "quarter")); // "in 3 qtrs."
The Intl.Segmenter object enables locale-sensitive text segmentation,
enabling you to get meaningful items (graphemes, words or sentences) from a string.
See docs.
const segmenterEn = new Intl.Segmenter("en", { granularity: "word" });
Array.from(segmenterEn.segment("The most amazing Api.")); // ["The", " ", "most", ...]
const segmenterJa = new Intl.Segmenter("ja-JP", { granularity: "word" });
Array.from(segmenterJa.segment("吾輩は猫である。名前はたぬき。")); // ["吾輩", "は", "猫", ...]
JavaScript modules allow code to be organized into reusable units.
Modules use import to load other modules and export to declare what is available to import from other
modules.
In HTML, modules are loaded with <script type="module">.
Pairs great with Import Maps.
Aka the view transitions that work with JavaScript and the startViewTransition() method.
Separate feature from the cross-document
view transitions.
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
The Temporal API allows you to work with dates, times, time zones, and durations. It fixes a lot of things that are broken in the current Date Api. If you believe the Date Api is not broken, try winning jsdate.wtf. A polyfill is available.
// parse
const isoString = "2025-10-23T19:00:00Z";
const instant = Temporal.Instant.from(isoString);
const zonedDateTime = instant.toZonedDateTimeISO('Africa/Johannesburg');
// now but zoned
const zonedDateTime = Temporal.Now.zonedDateTimeISO();
A standardized, powerful, and interoperable solution to react to Url changes.
A code-example:
const pattern = new URLPattern({ pathname: "/users/:id" });
const isMatch = pattern.test(location.href);