Intl API Browser — i18n

Intl API Browser Intl (Internationalization API) adalah API bawaan browser untuk formatting angka, tanggal, dan teks sesuai locale — tanpa library tambahan…

Intl API Browser

Intl (Internationalization API) adalah API bawaan browser untuk formatting angka, tanggal, dan teks sesuai locale — tanpa library tambahan.

Intl.DateTimeFormat

const date = new Date("2026-04-16");

// Format sesuai locale
new Intl.DateTimeFormat("id-ID").format(date)
// "16/4/2026"

new Intl.DateTimeFormat("en-US").format(date)
// "4/16/2026"

new Intl.DateTimeFormat("ja-JP", {
  year: "numeric", month: "long", day: "numeric"
}).format(date)
// "2026年4月16日"

// Opsi lengkap
new Intl.DateTimeFormat("id-ID", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  timeZone: "Asia/Jakarta"
}).format(date)
// "Kamis, 16 April 2026 07.00"

Intl.NumberFormat

// Angka biasa
new Intl.NumberFormat("id-ID").format(1234567.89)
// "1.234.567,89"

new Intl.NumberFormat("en-US").format(1234567.89)
// "1,234,567.89"

// Mata uang
new Intl.NumberFormat("id-ID", {
  style: "currency", currency: "IDR"
}).format(150000)
// "Rp 150.000,00"

new Intl.NumberFormat("ja-JP", {
  style: "currency", currency: "JPY"
}).format(1500)
// "¥1,500"

// Persen
new Intl.NumberFormat("id-ID", {
  style: "percent", minimumFractionDigits: 1
}).format(0.856)
// "85,6%"

// Compact notation
new Intl.NumberFormat("en", { notation: "compact" }).format(1500000)
// "1.5M"

Intl.RelativeTimeFormat

const rtf = new Intl.RelativeTimeFormat("id", { numeric: "auto" });

rtf.format(-1, "day")    // "kemarin"
rtf.format(-2, "day")    // "2 hari yang lalu"
rtf.format(1, "hour")    // "dalam 1 jam"
rtf.format(0, "day")     // "hari ini"

// English
const rtfEn = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
rtfEn.format(-1, "day")  // "yesterday"
rtfEn.format(3, "month") // "in 3 months"

Intl.Collator — Sorting Locale-aware

// Default sort tidak mengerti aksara non-ASCII
const names = ["Über", "Apfel", "Öl", "Birne"];

// ❌ Default
names.sort() // ["Apfel", "Birne", "Öl", "Über"] — Ö dan Ü di akhir

// ✅ Locale-aware
names.sort(new Intl.Collator("de").compare)
// ["Apfel", "Birne", "Öl", "Über"] — urutan benar dalam Jerman

Intl.ListFormat

const items = ["React", "Vue", "Svelte"];

new Intl.ListFormat("id", { type: "conjunction" }).format(items)
// "React, Vue, dan Svelte"

new Intl.ListFormat("en", { type: "disjunction" }).format(items)
// "React, Vue, or Svelte"

Yang akan kamu pelajari