Intl.DurationFormat kini tersedia di Dasar Pengukuran

Jeremy Wagner

Dipublikasikan: 20 Maret 2025

Informasi umum yang mungkin Anda lihat di halaman web adalah potongan teks yang menunjukkan berapa lama waktu yang tersisa hingga peristiwa tertentu, atau berapa lama waktu yang telah berlalu sejak peristiwa terjadi. Ini biasanya direpresentasikan sebagai string yang menyampaikan durasi waktu dalam jam, menit, detik, atau satuan waktu berguna lainnya.

Intl.DurationFormat adalah fitur berguna yang melakukan hal ini untuk Anda di browser sekaligus memperhitungkan kebutuhan internasionalisasi yang mungkin Anda miliki, tanpa memerlukan JavaScript tambahan. Mulai Maret 2025, fitur ini menjadi Dasar Pengukuran yang Baru tersedia.

Cara kerja Intl.DurationFormat

Intl.DurationFormat adalah class yang, saat dibuat instance-nya, menampilkan string yang menjelaskan durasi waktu. Fungsi ini berfungsi dengan menentukan objek yang berisi kunci dan nilai yang sesuai dengan satuan waktu yang Anda inginkan untuk string yang dihasilkan:

// Specify the duration:
const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 yr, 20 hr, 15 min, 35 sec'
new Intl.DurationFormat('en').format(duration);

Untuk menampilkan string dalam format panjang, teruskan nilai 'long' ke opsi style di argumen kedua konstruktor:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);

Sejauh ini, contoh ini menghasilkan string dalam bahasa Inggris. Mengingat ini adalah fitur internasionalisasi, kegunaan sebenarnya adalah Anda dapat meneruskan lokalitas yang valid dan mendapatkan string yang diformat dalam bahasa apa pun yang didukung yang Anda perlukan:

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// Output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);

// Output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);

// Output: '1年20小时15分钟35秒钟'
new Intl.DurationFormat('zh', { style: 'long' }).format(duration);

// Output: '1 år, 20 timer, 15 minutter og 35 sekunder'
new Intl.DurationFormat('no', { style: 'long' }).format(duration);

// Output: 'mwaka 1, saa 20, dakika 15 na sekunde 35'
new Intl.DurationFormat('sw', { style: 'long' }).format(duration);

Contoh ini hanya menunjukkan hal-hal yang dapat Anda lakukan dengan fitur baru ini. Untuk mengetahui kemampuannya lebih dalam, baca dokumentasi Intl.DurationFormat di MDN untuk mengetahui informasi selengkapnya.