أصبح التنسيق Intl.DurationFormat متوفّرًا الآن في الإصدار الأساسي

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 في الوسيطة الثانية لصانع السلسلة:

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 على MDN للحصول على مزيد من المعلومات.