كيف أعرض الساعات أو الدقائق أو الثواني فقط؟

مقدمة

غالبًا ما تحتاج عروض الوقت إلى إظهار مكونات محددة فقط. قد تعرض أداة الساعة الساعات والدقائق فقط دون الثواني. وقد يعرض مؤقت العد التنازلي الثواني فقط. وقد تعرض واجهة الجدولة ساعة الموعد فقط.

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

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

فهم مكونات الوقت

يحتوي الوقت على ثلاثة مكونات أساسية يمكنك تنسيقها بشكل مستقل.

تُظهر hour أي ساعة من اليوم. وتُظهر minute أي دقيقة من الساعة. وتُظهر second أي ثانية من الدقيقة.

يقبل كل مكون قيم تنسيق تتحكم في كيفية عرضه. يمكنك تضمين المكونات التي تحتاجها فقط في كائن الخيارات.

تنسيق الساعات فقط

يعرض خيار hour مكون الساعة. وهو يقبل قيمتين.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});
console.log(numeric.format(time)); // "2 PM"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit'
});
console.log(twoDigit.format(time)); // "02 PM"

تعرض قيمة numeric الساعة بدون أصفار في البداية. وتعرض قيمة 2-digit الساعة مع أصفار في البداية عند الحاجة.

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

تنسيق الدقائق فقط

يعرض خيار minute مكون الدقائق. وهو يقبل قيمتين.

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  minute: 'numeric'
});
console.log(numeric.format(time)); // "5"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  minute: '2-digit'
});
console.log(twoDigit.format(time)); // "05"

تعرض قيمة numeric الدقائق بدون أصفار في البداية. بينما تعرض قيمة 2-digit الدقائق مع أصفار في البداية.

عرض الدقائق فقط أقل شيوعًا من عرض الساعات أو الثواني بمفردها. معظم عروض الوقت تجمع بين الدقائق والساعات.

تنسيق الثواني فقط

يعرض خيار second مكون الثواني. وهو يقبل قيمتين.

const time = new Date('2025-03-15T14:05:08');

const numeric = new Intl.DateTimeFormat('en-US', {
  second: 'numeric'
});
console.log(numeric.format(time)); // "8"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});
console.log(twoDigit.format(time)); // "08"

تعرض قيمة numeric الثواني بدون أصفار في البداية. بينما تعرض قيمة 2-digit الثواني مع أصفار في البداية.

يعمل هذا بشكل جيد لعرض الثواني المنقضية في عداد أو إظهار جزء الثواني من الطابع الزمني.

دمج الساعات والدقائق

تعرض معظم شاشات الوقت كلاً من الساعات والدقائق. يمكنك دمج هذه الخيارات في منسق واحد.

const time = new Date('2025-03-15T14:05:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(formatter.format(time)); // "2:05 PM"

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

لا تحدد الفاصل أو الترتيب. اللغة المحلية هي التي تحدد هذه التفاصيل.

دمج الساعات والدقائق والثواني

يمكنك تضمين جميع مكونات الوقت الثلاثة عندما تحتاج إلى دقة زمنية كاملة.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:05:08 PM"

هذا ينتج وقتًا كاملًا مع الساعات والدقائق والثواني. يتعامل المنسق مع جميع الفواصل واتفاقيات التنسيق.

دمج الساعات والثواني بدون دقائق

يمكنك أيضًا دمج الساعات والثواني دون تضمين الدقائق، على الرغم من أن هذا غير شائع.

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:08 PM"

لا يزال المنسق ينتج مخرجات معقولة حتى لمجموعات المكونات غير المعتادة.

اختر بين التنسيق الرقمي وتنسيق الرقمين

الفرق بين numeric و2-digit يظهر بشكل أكبر مع القيم ذات الرقم الواحد.

const earlyTime = new Date('2025-03-15T08:05:03');
const lateTime = new Date('2025-03-15T14:35:48');

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

const digitFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

console.log('Numeric:');
console.log(numericFormatter.format(earlyTime)); // "8:5:3 AM"
console.log(numericFormatter.format(lateTime)); // "2:35:48 PM"

console.log('2-digit:');
console.log(digitFormatter.format(earlyTime)); // "08:05:03 AM"
console.log(digitFormatter.format(lateTime)); // "02:35:48 PM"

تنسيق numeric يحذف الأصفار البادئة، مما ينتج قيمًا مثل "8:5:3 AM". بينما تنسيق 2-digit يتضمن الأصفار البادئة، مما ينتج "08:05:03 AM".

استخدم 2-digit للدقائق والثواني في معظم الحالات. هذا يضمن عرضًا متناسقًا ومحاذاة في الجداول أو القوائم أو شاشات الساعة الرقمية. بدون الأصفار البادئة، تبدو الأوقات مثل "8:5 AM" غير منتظمة.

بالنسبة للساعات، يعتمد الاختيار على تصميمك. غالبًا ما تستخدم الساعات الرقمية 2-digit للاتساق. بينما تستخدم شاشات النصوص غالبًا numeric لمظهر أكثر طبيعية.

كيف تختلف تنسيقات الساعات حسب اللغة المحلية

تستخدم اللغات المحلية المختلفة اصطلاحات مختلفة لعرض الساعات. تستخدم اللغة الإنجليزية الأمريكية تنسيق 12 ساعة مع مؤشرات صباحًا/مساءً. بينما تستخدم العديد من اللغات المحلية الأخرى تنسيق 24 ساعة.

const time = new Date('2025-03-15T14:05:00');

const en = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(en.format(time)); // "2:05 PM"

const de = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(de.format(time)); // "14:05"

const fr = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(fr.format(time)); // "14:05"

const ja = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(ja.format(time)); // "14:05"

تقوم اللغة الإنجليزية الأمريكية بتحويل قيمة الـ 24 ساعة إلى تنسيق 12 ساعة وتضيف "PM". بينما تستخدم اللغات الألمانية والفرنسية واليابانية تنسيق 24 ساعة بدون مؤشرات صباحًا/مساءً.

أنت تحدد نفس الخيارات لجميع اللغات المحلية. يقوم المنسق تلقائيًا بتطبيق تنسيق الساعة المناسب بناءً على اصطلاحات اللغة المحلية.

كيف تختلف الفواصل حسب اللغة المحلية

تختلف أيضًا الفواصل بين مكونات الوقت حسب اللغة المحلية.

const time = new Date('2025-03-15T14:05:08');
const options = {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(time)); // "2:05:08 PM"

const fi = new Intl.DateTimeFormat('fi-FI', options);
console.log(fi.format(time)); // "14.05.08"

تستخدم اللغة الإنجليزية الأمريكية النقطتين بين المكونات. بينما تستخدم اللغة الفنلندية النقاط. أنت لا تحدد الفاصل. يختار المنسق الفاصل المناسب لكل لغة محلية.

متى تستخدم مكونات الوقت الفردية

استخدم مكونات الوقت الفردية عندما لا تتطابق أنماط الوقت المعدة مسبقًا مع احتياجاتك.

إذا كنت تريد الساعات والدقائق ولكن ليس الثواني، وكان الإعداد المسبق timeStyle: "short" يتضمن الثواني للغة المحلية المستهدفة، فحدد hour وminute بشكل فردي.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

إذا كنت بحاجة إلى عرض الساعة فقط لساعة مبسطة أو جدول زمني، استخدم خيار hour فقط.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

إذا كنت بحاجة إلى إظهار الثواني المنقضية في مؤقت أو عداد، استخدم خيار second فقط.

const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

متى تستخدم أنماط الوقت بدلاً من ذلك

إذا كنت بحاجة إلى عرض وقت كامل وكانت الأنماط المعدة مسبقاً تعمل للغتك المحلية، استخدم timeStyle بدلاً من ذلك. الأنماط المعدة مسبقاً أبسط وتضمن تنسيقاً متسقاً عبر اللغات المحلية المختلفة.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short'
});

هذا يختار تلقائياً المكونات المناسبة والتنسيق دون الحاجة إلى تحديد خيارات فردية.

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

حالات الاستخدام الشائعة لأجزاء الوقت المحددة

عرض الساعات فقط لواجهات جدولة المواعيد حيث تكون الدقائق الدقيقة أقل أهمية أو يتم التعامل معها بشكل منفصل.

const time = new Date('2025-03-15T14:00:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

console.log(`Meeting at ${formatter.format(time)}`);
// "Meeting at 2 PM"

عرض الساعات والدقائق لمعظم أدوات الساعة وعروض الوقت حيث تكون دقة الثواني غير ضرورية.

const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

console.log(formatter.format(time));
// "2:05 PM"

عرض الثواني وحدها لعدادات العد التنازلي التي تظهر الثواني المنقضية.

const time = new Date('2025-03-15T00:00:45');
const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

console.log(`${formatter.format(time)} seconds remaining`);
// "45 seconds remaining"

عرض الساعات والدقائق والثواني للطوابع الزمنية الدقيقة في السجلات أو مسارات التدقيق.

const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});

console.log(`Event logged at ${formatter.format(time)}`);
// "Event logged at 2:05:08 PM"

القيود عند استخدام المكونات الفردية

لا يمكنك الجمع بين خيارات مكونات الوقت الفردية مثل hour أو minute أو second مع خيار timeStyle. فالإعداد المسبق timeStyle يحدد بالفعل المكونات التي تظهر وكيفية تنسيقها.

هذا لن يعمل:

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  second: '2-digit'  // خطأ: لا يمكن الجمع
});

اختر بين استخدام أنماط الوقت أو تكوين المكونات الفردية. لا يمكنك استخدام كليهما.

يمكنك الجمع بين خيارات مكونات الوقت وخيارات مكونات التاريخ. هذا يتيح لك عرض أجزاء تاريخ محددة وأجزاء وقت محددة معًا.

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
});

const datetime = new Date('2025-03-15T14:05:00');
console.log(formatter.format(datetime));
// "Mar 15, 2:05 PM"

يمكنك أيضًا الجمع بين مكونات الوقت وخيارات مثل timeZone وcalendar أو numberingSystem.

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  timeZone: 'America/New_York'
});

const time = new Date('2025-03-15T14:05:00Z');
console.log(formatter.format(time));
// يعرض الوقت محولًا إلى منطقة نيويورك الزمنية

تنسيق الأوقات وفقًا للغة المستخدم

استخدم تفضيلات لغة المتصفح لتنسيق الأوقات وفقًا لتوقعات كل مستخدم.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const time = new Date('2025-03-15T14:05:00');
console.log(formatter.format(time));
// تختلف المخرجات حسب لغة المستخدم
// للغة en-US: "2:05 PM"
// للغة de-DE: "14:05"
// للغة ja-JP: "14:05"

هذا يطبق تلقائيًا تنسيق الساعة المناسب والفواصل ومؤشرات صباحًا/مساءً بناءً على لغة كل مستخدم.

إعادة استخدام المنسقات لتحسين الأداء

إنشاء نسخ من Intl.DateTimeFormat يتضمن معالجة بيانات اللغة والخيارات. عند تنسيق أوقات متعددة بنفس الإعدادات، قم بإنشاء المنسق مرة واحدة وأعد استخدامه.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const times = [
  new Date('2025-03-15T09:00:00'),
  new Date('2025-03-15T14:30:00'),
  new Date('2025-03-15T18:45:00')
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// المخرجات للغة en-US:
// "9:00 AM"
// "2:30 PM"
// "6:45 PM"

يحسن هذا النمط الأداء عند تنسيق مصفوفات من الأوقات أو عرض العديد من الطوابع الزمنية في واجهة المستخدم.

ما يجب تذكره

تتيح لك خيارات hour وminute وsecond عرض مكونات زمنية محددة بدلاً من الأوقات الكاملة. يقبل كل خيار قيم numeric أو 2-digit. القيمة numeric تحذف الأصفار البادئة. بينما تتضمن القيمة 2-digit الأصفار البادئة.

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

يختلف تنسيق الساعة حسب اللغة المحلية. تستخدم بعض اللغات المحلية تنسيق 12 ساعة مع مؤشرات صباحًا/مساءً. بينما تستخدم لغات أخرى تنسيق 24 ساعة بدون مؤشرات. أنت تحدد نفس الخيارات لجميع اللغات المحلية ويطبق المنسق الاتفاقيات المناسبة.

استخدم مكونات الوقت الفردية عندما تحتاج إلى تحكم دقيق في الأجزاء التي تظهر. استخدم أنماط الوقت عندما تريد تنسيقًا قياسيًا. لا يمكنك الجمع بين خيارات المكونات الفردية وخيارات نمط الوقت.

قم بتنسيق الأوقات باستخدام اللغة المحلية للمستخدم من navigator.language لعرض الأوقات وفقًا لتوقعات كل مستخدم. أعد استخدام نماذج التنسيق عند تنسيق أوقات متعددة للحصول على أداء أفضل.