كيفية تنسيق الفترات الزمنية مثل ساعتين و30 دقيقة
عرض المدد بلغة المستخدم مع التوطين التلقائي
مقدمة
عندما تعرض مدة استغراق شيء ما، تحتاج إلى عرض تلك المدة بطريقة يفهمها المستخدمون. يعرض الفيديو وقت تشغيل مدته ساعتان و30 دقيقة، ويتتبع تطبيق التمارين مدة التمرين، وتعرض أداة إدارة المشاريع وقت إكمال المهمة. بدون التوطين، قد تكتب الكود بهذه الطريقة:
const hours = 2;
const minutes = 30;
const timeSpan = `${hours}h ${minutes}m`;
هذا ينتج "2h 30m" لجميع المستخدمين بغض النظر عن اللغة. يرى المستخدمون الفرنسيون "2h 30m" عندما يتوقعون "2 h 30 min". يرى المستخدمون الألمان الاختصارات الإنجليزية بدلاً من "2 Std. 30 Min". لا يحصل المستخدمون الإسبان على أداة الربط "y" بين الوحدات.
توفر JavaScript واجهة برمجة التطبيقات Intl.DurationFormat لتنسيق الفترات الزمنية وفقًا للغة المستخدم والاتفاقيات الثقافية. يشرح هذا الدرس كيفية إنشاء منسقات المدة، وبناء كائنات المدة، وعرض الفترات الزمنية بشكل صحيح لأي لغة محلية.
ما هي الفترات الزمنية
تمثل الفترة الزمنية مدة زمنية، وليس نقطة زمنية. الرقم 150 دقيقة هو مدة. 15 مارس 2025 الساعة 2:30 مساءً هو تاريخ ووقت.
هذا التمييز مهم لأن التواريخ تتضمن التقويمات والمناطق الزمنية والقواعد التاريخية. تقيس الفترات الزمنية الوقت المنقضي بدون سياق التقويم. لا يمكنك إضافة منطقة زمنية إلى مدة لأن المدد موجودة بشكل مستقل عن أي لحظة محددة.
استخدم Intl.DurationFormat للفترات الزمنية. استخدم Intl.DateTimeFormat للتواريخ والأوقات. استخدم Intl.RelativeTimeFormat للتعبيرات النسبية مثل "قبل ساعتين".
إنشاء منسق المدة
يأخذ منشئ Intl.DurationFormat لغة محلية وكائن خيارات. تحدد اللغة المحلية لغة الإخراج. تتحكم الخيارات في نمط التنسيق وعرض الوحدة.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
استدعِ format() مع كائن مدة لإنتاج سلسلة منسقة. يحتوي كائن المدة على خصائص رقمية لوحدات الوقت.
const duration = { hours: 2, minutes: 30 };
formatter.format(duration);
// "2 hours and 30 minutes"
تتعامل واجهة برمجة التطبيقات مع الاختصارات وأدوات الربط وترتيب الكلمات والمسافات تلقائيًا بناءً على اللغة المحلية.
إنشاء كائنات المدة
كائن المدة هو كائن جافاسكريبت عادي يحتوي على خصائص لوحدات الوقت. قم بتضمين الوحدات التي تريد عرضها فقط.
const duration1 = { hours: 2, minutes: 30 };
const duration2 = { minutes: 5, seconds: 45 };
const duration3 = { hours: 1, minutes: 15, seconds: 30 };
تدعم واجهة البرمجة وحدات الوقت التالية: years، months، weeks، days، hours، minutes، seconds، milliseconds، microseconds، nanoseconds.
لست بحاجة إلى تضمين جميع الوحدات. يمكنك حذف أي وحدة لا ترغب في عرضها.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
formatter.format({ hours: 2, minutes: 30 });
// "2 hours and 30 minutes"
formatter.format({ minutes: 30 });
// "30 minutes"
formatter.format({ hours: 2 });
// "2 hours"
اختيار نمط التنسيق
يتحكم خيار style في كثافة الإخراج. تتوفر أربعة أنماط: long، short، narrow، وdigital.
النمط الطويل يستخدم كلمات كاملة. استخدم هذا للنثر ومناطق المحتوى الرئيسية.
const duration = { hours: 2, minutes: 30 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
النمط القصير يستخدم اختصارات شائعة. استخدم هذا عندما تكون المساحة محدودة ولكن إمكانية القراءة مهمة.
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "2 hr and 30 min"
النمط الضيق يستخدم الحد الأدنى من الأحرف. استخدم هذا للعروض المدمجة مثل واجهات الجوال أو جداول البيانات.
new Intl.DurationFormat('en', { style: 'narrow' }).format(duration);
// "2h 30m"
النمط الرقمي ينتج إخراجًا يشبه المؤقت باستخدام النقطتين. استخدم هذا لمشغلات الوسائط وشاشات العد التنازلي.
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "2:30:00"
يتطلب النمط الرقمي تضمين جميع الوحدات من الأكبر إلى الأصغر. إذا قمت بتنسيق الساعات والدقائق، فيجب عليك أيضًا تضمين الثواني.
تنسيق الفترات الزمنية بلغات مختلفة
تظهر نفس الفترة الزمنية بتنسيقات مختلفة في كل لغة. تتعامل واجهة البرمجة مع جميع عمليات التوطين تلقائيًا.
const duration = { hours: 2, minutes: 30 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
new Intl.DurationFormat('fr', { style: 'long' }).format(duration);
// "2 heures et 30 minutes"
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// "2 Stunden und 30 Minuten"
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
// "2 horas y 30 minutos"
new Intl.DurationFormat('ja', { style: 'long' }).format(duration);
// "2時間30分"
لاحظ كيف تستخدم كل لغة محلية كلمات وروابط مختلفة. الفرنسية تستخدم "et"، الألمانية تستخدم "und"، الإسبانية تستخدم "y"، اليابانية لا تستخدم روابط. تعرف واجهة البرمجة هذه القواعد لكل لغة محلية.
الأنماط القصيرة والضيقة تتوطن أيضًا بشكل صحيح.
new Intl.DurationFormat('fr', { style: 'short' }).format(duration);
// "2 h et 30 min"
new Intl.DurationFormat('de', { style: 'narrow' }).format(duration);
// "2 Std. 30 Min."
تنسيق الفترات الزمنية للغة المستخدم
بدلاً من تحديد لغة محلية بشكل ثابت، استخدم اللغة المفضلة للمستخدم من المتصفح. تُرجع خاصية navigator.language تفضيل اللغة الأعلى للمستخدم.
const userLocale = navigator.language;
const formatter = new Intl.DurationFormat(userLocale, { style: 'short' });
const duration = { hours: 2, minutes: 30 };
formatter.format(duration);
// تختلف المخرجات حسب اللغة المحلية للمستخدم
// لـ en-US: "2 hr and 30 min"
// لـ de-DE: "2 Std. und 30 Min."
// لـ fr-FR: "2 h et 30 min"
يعرض هذا الفترات الزمنية وفقًا لتوقعات كل مستخدم دون الحاجة إلى اختيار اللغة المحلية يدويًا.
تحويل الميلي ثانية إلى كائنات المدة الزمنية
غالبًا ما تنتج حسابات الوقت بالميلي ثانية. قم بتحويل الميلي ثانية إلى كائنات المدة عن طريق القسمة على العوامل المناسبة.
const milliseconds = 9000000; // ساعتان و30 دقيقة
const hours = Math.floor(milliseconds / 3600000);
const minutes = Math.floor((milliseconds % 3600000) / 60000);
const seconds = Math.floor((milliseconds % 60000) / 1000);
const duration = { hours, minutes, seconds };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours, 30 minutes and 0 seconds"
تجاهل القيم الصفرية ما لم تكن ترغب تحديدًا في عرضها.
const duration = {};
if (hours > 0) duration.hours = hours;
if (minutes > 0) duration.minutes = minutes;
if (seconds > 0) duration.seconds = seconds;
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "2 hours and 30 minutes"
حساب الفترات الزمنية من تاريخين
احسب المدة بين تاريخين عن طريق طرح الطوابع الزمنية، ثم تحويل النتيجة إلى كائن مدة.
const startTime = new Date('2025-10-15T10:00:00');
const endTime = new Date('2025-10-15T12:30:00');
const diffMs = endTime - startTime;
const hours = Math.floor(diffMs / 3600000);
const minutes = Math.floor((diffMs % 3600000) / 60000);
const duration = { hours, minutes };
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "2 hr and 30 min"
يعمل هذا النهج لأي حساب زمني ينتج ميلي ثانية.
تنسيق مدة مشغل الفيديو
تعرض مشغلات الفيديو المدة في عناصر التحكم. استخدم النمط الرقمي أو الضيق للعرض المدمج.
function formatVideoDuration(totalSeconds) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
const duration = hours > 0
? { hours, minutes, seconds }
: { minutes, seconds };
const locale = navigator.language;
return new Intl.DurationFormat(locale, { style: 'digital' }).format(duration);
}
formatVideoDuration(9000); // "2:30:00"
formatVideoDuration(330); // "5:30"
يتضمن هذا الساعات بشكل مشروط فقط عند الحاجة، مع إظهار "5:30" للفيديوهات القصيرة و"2:30:00" للمحتوى الأطول.
تنسيق مدة التمارين الرياضية
تتبع تطبيقات اللياقة البدنية مدة التمارين. استخدم النمط الطويل لملخصات الجلسات والنمط الضيق لعروض القوائم المضغوطة.
function formatWorkoutDuration(startTime, endTime, locale) {
const diffMs = endTime - startTime;
const hours = Math.floor(diffMs / 3600000);
const minutes = Math.floor((diffMs % 3600000) / 60000);
const duration = hours > 0
? { hours, minutes }
: { minutes };
return new Intl.DurationFormat(locale, { style: 'long' }).format(duration);
}
const workoutStart = new Date('2025-10-15T07:00:00');
const workoutEnd = new Date('2025-10-15T09:30:00');
formatWorkoutDuration(workoutStart, workoutEnd, 'en');
// "2 hours and 30 minutes"
formatWorkoutDuration(workoutStart, workoutEnd, 'es');
// "2 horas y 30 minutos"
تنسيق مدة مهام المشروع
تعرض أدوات إدارة المشاريع المدة التي تستغرقها المهام. استخدم النمط القصير لعروض لوحة المعلومات.
function formatTaskDuration(minutes, locale) {
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
const duration = {};
if (hours > 0) duration.hours = hours;
if (mins > 0) duration.minutes = mins;
return new Intl.DurationFormat(locale, { style: 'short' }).format(duration);
}
formatTaskDuration(150, 'en');
// "2 hr and 30 min"
formatTaskDuration(45, 'en');
// "45 min"
formatTaskDuration(150, 'de');
// "2 Std. und 30 Min."
تنسيق وحدات زمنية مختلفة
لا تقتصر الفترات الزمنية على الساعات والدقائق. قم بتنسيق أي مجموعة من الوحدات المدعومة.
const formatter = new Intl.DurationFormat('en', { style: 'long' });
formatter.format({ days: 3, hours: 2 });
// "3 days and 2 hours"
formatter.format({ minutes: 45, seconds: 30 });
// "45 minutes and 30 seconds"
formatter.format({ hours: 1, minutes: 30, seconds: 45 });
// "1 hour, 30 minutes and 45 seconds"
تتعامل واجهة برمجة التطبيقات مع حروف العطف والفواصل المناسبة لأي مجموعة من الوحدات.
تنسيق الفترات الزمنية بالثواني فقط
عندما تكون المدة أقل من دقيقة، قم بتضمين الثواني فقط.
const formatter = new Intl.DurationFormat('en', { style: 'short' });
formatter.format({ seconds: 45 });
// "45 sec"
formatter.format({ seconds: 5 });
// "5 sec"
للمدد القصيرة جدًا، يمكنك تضمين الميلي ثانية.
formatter.format({ seconds: 5, milliseconds: 500 });
// "5 sec and 500 ms"
إعادة استخدام نماذج التنسيق لتحسين الأداء
إنشاء منسق جديد يتضمن تحميل بيانات اللغة ومعالجة الخيارات. عندما تقوم بتنسيق فترات زمنية متعددة بنفس اللغة والنمط، قم بإنشاء المنسق مرة واحدة وأعد استخدامه.
const formatter = new Intl.DurationFormat('en', { style: 'short' });
const durations = [
{ hours: 1, minutes: 30 },
{ hours: 2, minutes: 15 },
{ minutes: 45 }
];
durations.map(d => formatter.format(d));
// ["1 hr and 30 min", "2 hr and 15 min", "45 min"]
يحسن هذا النمط الأداء عند تنسيق العديد من المدد في الحلقات أو العروض المتكررة.
دعم المتصفح
أصبحت واجهة برمجة التطبيقات Intl.DurationFormat أساسية في مارس 2025. وهي تعمل في أحدث إصدارات Chrome وEdge وFirefox وSafari. المتصفحات القديمة لا تدعم واجهة برمجة التطبيقات هذه.
تحقق من الدعم قبل استخدام واجهة برمجة التطبيقات.
if (typeof Intl.DurationFormat !== 'undefined') {
const formatter = new Intl.DurationFormat('en', { style: 'short' });
return formatter.format(duration);
} else {
return `${duration.hours}h ${duration.minutes}m`;
}
هذا يوفر حلاً بديلاً للمتصفحات القديمة مع استخدام واجهة برمجة التطبيقات الأصلية عندما تكون متاحة.