كيفية تضمين الثواني الكسرية في عرض المدة
عرض دقة أقل من الثانية في الفترات الزمنية المنسقة
مقدمة
عندما تعرض المدد الزمنية بدقة أقل من الثانية، تحتاج إلى إظهار الكسور الثانوية. يُظهر ساعة الإيقاف 1.234 ثانية، ويعرض محلل الأداء وقت التحميل بمقدار 0.853 ثانية، وتُظهر ساعة توقيت السباق وقت الإنهاء بمقدار 45.678 ثانية. بدون التنسيق المناسب، قد تكتب كودًا مثل هذا:
const seconds = 1.234;
const duration = `${seconds}s`;
هذا ينتج "1.234s" بفاصل عشري مُضمّن في الكود. يرى المستخدمون الفرنسيون "1.234s" بينما يتوقعون "1,234 s" بفاصلة كفاصل عشري. تستخدم اللغات المختلفة فواصل عشرية واتفاقيات تباعد مختلفة.
توفر جافا سكريبت خيار fractionalDigits في Intl.DurationFormat للتحكم في كيفية ظهور الكسور الثانوية في المدد الزمنية المنسقة. يشرح هذا الدرس كيفية إضافة الكسور الثانوية إلى عروض المدة والتحكم في دقتها.
ما هي الكسور الثانوية
تمثل الكسور الثانوية فترات زمنية أصغر من ثانية واحدة. القيمة 1.5 ثانية تعني ثانية ونصف. القيمة 0.250 ثانية تعني ربع ثانية.
تظهر الكسور الثانوية في ثلاثة أشكال:
- ميلي ثانية: جزء من ألف من الثانية (0.001 ثانية)
- ميكرو ثانية: جزء من مليون من الثانية (0.000001 ثانية)
- نانو ثانية: جزء من مليار من الثانية (0.000000001 ثانية)
يتحكم خيار fractionalDigits في عدد المنازل العشرية التي تظهر بعد قيمة الثواني. ضبط fractionalDigits: 3 يُظهر دقة الميلي ثانية. ضبط fractionalDigits: 6 يُظهر دقة الميكرو ثانية.
تنسيق المدد الزمنية بدون كسور ثانوية
افتراضيًا، يُظهر تنسيق المدة الزمنية ثواني كاملة بدون أي مكون كسري.
const duration = { hours: 0, minutes: 0, seconds: 1 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second"
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "0:00:01"
حتى إذا قمت بتضمين ميلي ثانية كوحدة منفصلة، فإنها تُعرض كوحدة متميزة بدلاً من كسور ثانوية.
const duration = { seconds: 1, milliseconds: 234 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second and 234 milliseconds"
هذا يعرض وحدتين منفصلتين. لإظهار "1.234 ثانية" بدلاً من ذلك، تحتاج إلى خيار fractionalDigits.
إضافة الكسور الثانوية إلى المدد الزمنية
يتحكم خيار fractionalDigits في عدد المنازل العشرية التي تظهر في قيمة الثواني. قم بتعيين هذا الخيار لتضمين الثواني الكسرية في المخرجات.
const duration = { seconds: 1.234 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1.234 seconds"
تقوم واجهة البرمجة بدمج الأجزاء الكاملة والكسرية في قيمة منسقة واحدة مع فاصل عشري مناسب للغة المحلية.
التحكم في دقة الثواني الكسرية
يقبل خيار fractionalDigits قيمًا من 0 إلى 9. وهذا يحدد عدد الأرقام التي تظهر بعد النقطة العشرية.
const duration = { seconds: 1.23456789 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 0
}).format(duration);
// "1 second"
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 2
}).format(duration);
// "1.23 seconds"
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 4
}).format(duration);
// "1.2346 seconds"
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 6
}).format(duration);
// "1.234568 seconds"
عندما تتجاوز الدقة المحددة الأرقام المتاحة، يقوم المنسق بالحشو بالأصفار.
const duration = { seconds: 1.5 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 4
}).format(duration);
// "1.5000 seconds"
عندما يكون التقريب ضروريًا، يقوم المنسق بالتقريب نحو الصفر.
const duration = { seconds: 1.9999 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 2
}).format(duration);
// "1.99 seconds"
استخدام الثواني الكسرية في التنسيق الرقمي
يعرض التنسيق الرقمي المدد الزمنية بالنقطتين مثل المؤقت. تظهر الثواني الكسرية بعد قيمة الثواني.
const duration = { hours: 2, minutes: 30, seconds: 12.345 };
new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
}).format(duration);
// "2:30:12.345"
new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 2
}).format(duration);
// "2:30:12.34"
يعمل هذا مع أي مجموعة من وحدات الوقت في التنسيق الرقمي.
const duration = { minutes: 5, seconds: 30.678 };
new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
}).format(duration);
// "5:30.678"
تنسيق الثواني الكسرية في لغات مختلفة
تستخدم اللغات المختلفة فواصل عشرية مختلفة. تستخدم الإنجليزية نقطة، بينما تستخدم العديد من اللغات الأوروبية فاصلة.
const duration = { seconds: 1.234 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1.234 seconds"
new Intl.DurationFormat('fr', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1,234 seconde"
new Intl.DurationFormat('de', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1,234 Sekunden"
new Intl.DurationFormat('ar', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "١٫٢٣٤ ثانية"
تستخدم واجهة البرمجة الفاصل العشري الصحيح، وأحرف الأرقام، والمسافات المناسبة لكل لغة.
تنسيق أوقات ساعة الإيقاف
تحتاج تطبيقات ساعة الإيقاف إلى عرض الوقت المنقضي بدقة أقل من الثانية. استخدم التنسيق الرقمي مع الثواني الكسرية.
function formatStopwatchTime(totalSeconds) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const duration = { minutes, seconds };
const locale = navigator.language;
return new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
}
formatStopwatchTime(65.47);
// "1:05.47"
formatStopwatchTime(123.89);
// "2:03.89"
يعرض هذا أوقاتًا مثل "1:05.47" مع منزلتين عشريتين لدقة أجزاء المائة من الثانية.
تنسيق أوقات إنهاء السباق
تعرض أنظمة توقيت الرياضة أوقات الإنهاء بدقة عالية. استخدم دقة الميلي ثانية لنتائج السباق.
function formatRaceTime(totalSeconds, locale) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const duration = { minutes, seconds };
return new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 3
}).format(duration);
}
formatRaceTime(125.678, 'en');
// "2:05.678"
formatRaceTime(125.678, 'fr');
// "2:05,678"
تُظهر المنازل العشرية الثلاثة دقة الميلي ثانية لتوقيت السباق الدقيق.
تنسيق مقاييس الأداء
تعرض أدوات تحليل الأداء أوقات التحميل وأوقات التنفيذ بدقة أقل من الثانية. استخدم التنسيق القصير مع الثواني الكسرية.
function formatLoadTime(seconds, locale) {
const duration = { seconds };
return new Intl.DurationFormat(locale, {
style: 'short',
fractionalDigits: 3
}).format(duration);
}
formatLoadTime(0.853, 'en');
// "0.853 sec"
formatLoadTime(2.145, 'en');
// "2.145 sec"
يعرض هذا مقاييس الأداء بتنسيق مختصر مع دقة الميلي ثانية.
تنسيق طوابع الوقت لإطارات الفيديو
تعرض تطبيقات تحرير الفيديو طوابع زمنية دقيقة للإطارات. استخدم الثواني الكسرية بناءً على معدل الإطارات.
function formatVideoTimestamp(totalSeconds, locale) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
const duration = hours > 0
? { hours, minutes, seconds }
: { minutes, seconds };
return new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
}
formatVideoTimestamp(125.67, 'en');
// "2:05.67"
formatVideoTimestamp(3665.42, 'en');
// "1:01:05.42"
يعرض هذا طوابع زمنية بدقة على مستوى الإطار لفيديو بمعدل 100 إطار في الثانية.
تحويل الميلي ثانية إلى ثوانٍ كسرية
غالبًا ما تنتج حسابات الوقت بالميلي ثانية. قم بتحويل الميلي ثانية إلى ثوانٍ كسرية بالقسمة على 1000.
const milliseconds = 1234;
const totalSeconds = milliseconds / 1000;
const duration = { seconds: totalSeconds };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1.234 seconds"
يحول هذا الميلي ثانية الكاملة إلى قيمة ثوانٍ كسرية.
التعامل مع المدد الزمنية القصيرة جدًا
للمدد الزمنية الأقل من ثانية واحدة، قم بتضمين وحدة الثواني فقط مع أرقام كسرية.
const duration = { seconds: 0.045 };
new Intl.DurationFormat('en', {
style: 'short',
fractionalDigits: 3
}).format(duration);
// "0.045 sec"
يشير الصفر قبل النقطة العشرية إلى مدة زمنية أقل من ثانية.
اختيار الدقة المناسبة لحالة الاستخدام
تتطلب التطبيقات المختلفة مستويات مختلفة من الدقة:
- ساعات الإيقاف: منزلتان عشريتان (سنتي ثانية)
- توقيت الرياضة: 3 منازل عشرية (ميلي ثانية)
- تحليل الأداء: 3 منازل عشرية (ميلي ثانية)
- القياسات العلمية: 6-9 منازل عشرية (ميكرو ثانية إلى نانو ثانية)
قم بمطابقة قيمة fractionalDigits مع متطلبات الدقة الخاصة بك.
const duration = { seconds: 1.23456789 };
const locale = navigator.language;
// للتوقيت العام
new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
// "0:00:01.23"
// للقياسات الدقيقة
new Intl.DurationFormat(locale, {
style: 'short',
fractionalDigits: 6
}).format(duration);
// "1.234568 sec"
تجنب إظهار دقة أكبر مما يوفره نظام القياس الخاص بك.
حذف الكسور الثانوية عندما لا تكون هناك حاجة إليها
قم بتعيين fractionalDigits: 0 لعرض الثواني الكاملة بدون أي مكون كسري.
const duration = { seconds: 1.7 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 0
}).format(duration);
// "1 second"
هذا يقرب القيمة ويعرض فقط الجزء الصحيح من العدد.
إعادة استخدام المنسقات مع الثواني الكسرية
إنشاء منسقات بإعدادات دقة محددة يتبع نفس تحسين الأداء كالمنسقات الأخرى.
const formatter = new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
});
const times = [
{ minutes: 1, seconds: 5.234 },
{ minutes: 2, seconds: 15.678 },
{ minutes: 0, seconds: 45.901 }
];
times.map(t => formatter.format(t));
// ["1:05.234", "2:15.678", "0:45.901"]
هذا يعيد استخدام نسخة المنسق للحصول على أداء أفضل عند تنسيق مدد زمنية متعددة.
دعم المتصفح
خيار fractionalDigits هو جزء من واجهة برمجة التطبيقات Intl.DurationFormat، التي أصبحت أساسية في مارس 2025. وهي تعمل في أحدث إصدارات Chrome وEdge وFirefox وSafari.
تحقق من الدعم قبل استخدام الثواني الكسرية.
if (typeof Intl.DurationFormat !== 'undefined') {
const formatter = new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
});
return formatter.format(duration);
} else {
return `${duration.minutes}:${duration.seconds.toFixed(3)}`;
}
هذا يوفر حلاً بديلاً للمتصفحات القديمة مع استخدام واجهة برمجة التطبيقات الأصلية عندما تكون متاحة.