Intl.DurationFormat הוא עכשיו Baseline זמין חדש

Jeremy Wagner

תאריך פרסום: 20 במרץ 2025

מידע נפוץ שעשוי להופיע בדף אינטרנט הוא קטע טקסט שמציין כמה זמן נותר עד לאירוע מסוים, או כמה זמן חלף מאז שאירוע מסוים התרחש. בדרך כלל הוא מיוצג כמחרוזת שמציינת את משך הזמן בשעות, בדקות, בשניות או ביחידות זמן שימושיות אחרות.

Intl.DurationFormat היא תכונה שימושית שמבצעת את הפעולה הזו בדפדפן, תוך התחשבות בצרכים שלכם בנושאי גלובליזציה, בלי צורך ב-JavaScript נוסף. החל ממרץ 2025, האפשרות הזו הפכה לאפשרות 'בסיס חדש זמין'.

הסבר על 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 בארגומנט השני של ה-constructor:

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.