โค Like
๐Ÿ”– Save
๐Ÿ”— Share
@thedevspaceio
@thedevspaceio

JavaScript Intl Cheatsheet

@thedevspaceio

๐ŸŒ JavaScript Intl Cheatsheet

The Intl object provides built-in language-sensitive formatting for dates, numbers, lists, and more without external libraries.

โœ… 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