โค Like
๐Ÿ”– Save
๐Ÿ”— Share
Eric Hu
Eric Hu

JavaScript Intl Namespace

@thedevspaceio

๐ŸŒ Make Your App International with Intl

You're building an app that needs to support customers from around the world.

Dates need to look right in Tokyo, London, and New York.

Currencies need the correct symbols and formats.

Lists need proper separators based on language.

JavaScript comes with a built-in Intl namespace that helps you achieve this.

โœ… Intl.DateTimeFormat โœ… Intl.NumberFormat โœ… Intl.ListFormat โœ… Intl.RelativeTimeFormat โœ… Intl.Collator โœ… Intl.PluralRules โœ… Intl.Segmenter

#javascript #intl #localization #i18n #formatting #dates #numbers #webdev #frontend #coding #tips

The Intl namespace provides a set of constructors for language-sensitive formatting and comparison.

ConstructorPurpose
Intl.DateTimeFormatFormat dates and times for a locale.
Intl.NumberFormatFormat numbers, currencies, and units.
Intl.ListFormatFormat arrays into localized lists.
Intl.RelativeTimeFormatFormat relative time expressions.
Intl.CollatorCompare strings for sorting.
Intl.PluralRulesDetermine plural forms for a locale.
Intl.SegmenterSegment text by grapheme, word, or sentence.

Intl.DateTimeFormat

Format dates and times for a specific locale.

js
const date = new Date("2024-07-12T10:30:00");
 
new Intl.DateTimeFormat("en-US").format(date); // "7/12/2024"
new Intl.DateTimeFormat("en-GB").format(date); // "12/07/2024"
new Intl.DateTimeFormat("ja-JP").format(date); // "2024/07/12"

With formatting options.

js
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
};
 
new Intl.DateTimeFormat("en-US", options).format(date);
// "Friday, July 12, 2024 at 10:30 AM"

Intl.NumberFormat

Format numbers, currencies, percentages, and units.

js
const number = 1234567.89;
 
new Intl.NumberFormat("en-US").format(number); // "1,234,567.89"
new Intl.NumberFormat("de-DE").format(number); // "1.234.567,89"
new Intl.NumberFormat("ja-JP").format(number); // "1,234,567.89"

Currency

js
new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).format(1234.5); // "$1,234.50"
 
new Intl.NumberFormat("ja-JP", {
  style: "currency",
  currency: "JPY",
}).format(1234); // "๏ฟฅ1,234"

Units

js
new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour",
}).format(90); // "90 km/h"
 
new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "celsius",
}).format(25); // "25ยฐC"

Percentages

js
new Intl.NumberFormat("en-US", {
  style: "percent",
}).format(0.85); // "85%"

Intl.ListFormat

Format arrays into localized lists.

js
const items = ["HTML", "CSS", "JavaScript"];
 
new Intl.ListFormat("en-US", { type: "conjunction" }).format(items);
// "HTML, CSS, and JavaScript"
 
new Intl.ListFormat("en-US", { type: "disjunction" }).format(items);
// "HTML, CSS, or JavaScript"
 
new Intl.ListFormat("en-US", { type: "unit" }).format(items);
// "HTML, CSS, JavaScript"

Intl.RelativeTimeFormat

Format relative time expressions like "2 days ago" or "in 3 hours".

js
const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
 
rtf.format(-1, "day"); // "yesterday"
rtf.format(0, "day"); // "today"
rtf.format(1, "day"); // "tomorrow"
rtf.format(-3, "month"); // "3 months ago"
rtf.format(5, "minute"); // "in 5 minutes"

Intl.Collator

Compare strings for sorting in a locale-aware way.

js
const words = ["Z", "a", "z", "รค"];
 
words.sort(new Intl.Collator("de").compare);
// ["a", "รค", "z", "Z"]
 
words.sort(new Intl.Collator("sv").compare);
// ["a", "z", "Z", "รค"]

Case-insensitive comparison.

js
new Intl.Collator("en", { sensitivity: "base" }).compare("resume", "Resume"); // 0

Intl.PluralRules

Determine the plural category for a number.

js
const pr = new Intl.PluralRules("en-US");
 
pr.select(0); // "other"
pr.select(1); // "one"
pr.select(2); // "other"

Useful for choosing the right message string.

js
function pluralize(count, singular, plural) {
  const rules = new Intl.PluralRules("en-US");
  return rules.select(count) === "one" ? singular : plural;
}
 
pluralize(1, "apple", "apples"); // "apple"
pluralize(3, "apple", "apples"); // "apples"

Intl.Segmenter

Segment text by grapheme, word, or sentence.

js
const segmenter = new Intl.Segmenter("en", { granularity: "word" });
const segments = Array.from(segmenter.segment("Hello world"));
 
segments.map((s) => s.segment); // ["Hello", " ", "world"]

Grapheme segmentation.

js
const graphemes = new Intl.Segmenter("en", { granularity: "grapheme" });
Array.from(graphemes.segment("๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ")).length; // 1

Full-Stack AI Developer Roadmap

From HTML & CSS to working with AI models, all in one structured roadmap.

@thedevspaceio
www.thedevspace.io