Intl.DurationFormat พร้อมใช้งานเป็น Baseline ใหม่แล้ว

bookmark_border จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

Jeremy Wagner

เผยแพร่: 20 มี.ค. 2025

ข้อมูลทั่วไปที่คุณอาจเห็นในหน้าเว็บคือข้อความที่บอกระยะเวลาที่เหลือจนกว่าจะเกิดเหตุการณ์หนึ่งๆ หรือระยะเวลาที่ผ่านไปนับตั้งแต่เกิดเหตุการณ์หนึ่งๆ โดยปกติจะแสดงเป็นสตริงที่ระบุระยะเวลาเป็นชั่วโมง นาที วินาที หรือหน่วยเวลาอื่นๆ ที่เป็นประโยชน์

Intl.DurationFormat เป็นฟีเจอร์ที่มีประโยชน์ซึ่งจะดำเนินการนี้ให้คุณในเบราว์เซอร์โดยคำนึงถึงความต้องการในการแปลภาษาที่คุณอาจมี โดยไม่ต้องใช้ JavaScript เพิ่มเติม ในเดือนมีนาคม 2025 ฟีเจอร์นี้เปลี่ยนเป็น "Baseline ใหม่พร้อมใช้งาน"

วิธีการทำงานของ Intl.DurationFormat

Intl.DurationFormat เป็นคลาสที่เมื่อสร้างอินสแตนซ์จะแสดงผลสตริงที่อธิบายระยะเวลา โดยระบุออบเจ็กต์ที่มีคีย์และค่าซึ่งสอดคล้องกับหน่วยเวลาที่ต้องการสร้างสตริง

// 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);

หากต้องการแสดงผลสตริงในรูปแบบยาว ให้ส่งค่า 'long' ไปยังตัวเลือก style ในอาร์กิวเมนต์ที่ 2 ของตัวสร้างคอนสตรัคเตอร์ ดังนี้

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);

จนถึงตอนนี้ ตัวอย่างเหล่านี้จะสร้างสตริงเป็นภาษาอังกฤษ เนื่องจากเป็นฟีเจอร์ที่รองรับหลายภาษา ประโยชน์ที่แท้จริงของฟีเจอร์นี้คือคุณสามารถส่งผ่านภาษาใดก็ได้ที่ถูกต้องและรับสตริงที่จัดรูปแบบในภาษาที่รองรับตามที่คุณต้องการ

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);

ตัวอย่างเหล่านี้เป็นเพียงการสาธิตสิ่งที่คุณทำได้ด้วยฟีเจอร์ใหม่นี้ หากต้องการดูรายละเอียดเพิ่มเติมเกี่ยวกับความสามารถของ Intl.DurationFormat โปรดอ่านเอกสารประกอบของ Intl.DurationFormat ใน MDN