intl.durationformat هو الآن خط الأساس متاح حديثا | بلوق | web.dev

intl.durationformat الآن أساسي متاح حديثًا

ابق منظمًا مع المجموعات

احفظ وتصنيف المحتوى بناءً على تفضيلاتك.

تم النشر: 20 مارس 2025

جزء شائع من المعلومات التي قد تراها على صفحة الويب هي قطعة نص تشير إلى المدة التي تستغرقها حتى حدث معين ، أو مدة الوقت قد انقضى منذ حدوث حدث ما. عادةً ما يتم تمثيل هذا كسلسلة تنقل المدة الزمنية في الساعات أو الدقائق أو الثواني أو وحدات زمنية مفيدة أخرى.

Intl.DurationFormat هي ميزة مفيدة تقوم بذلك من أجلك في المتصفح مع حساب أي احتياجات تدويل قد تكون لديك ، دون الحاجة إلى جافا سكريبت إضافية. اعتبارًا من مارس 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 لمزيد من المعلومات.