เผยแพร่: 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