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

مقدمة

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

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

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

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

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

يعرض 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 ساعة مع مؤشرات AM/PM. تستخدم اللغات الأخرى اصطلاحات مختلفة، والتي يغطيها هذا الدرس لاحقاً.

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

يعرض خيار 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 ساعة مع مؤشرات AM/PM. تستخدم العديد من اللغات الأخرى تنسيق 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 ساعة دون مؤشرات AM/PM.

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

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

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

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'  // Error: cannot combine
});

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

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

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));
// Displays time converted to New York timezone

تنسيق الأوقات حسب لغة المستخدم

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

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));
// Output varies by user's locale
// For en-US: "2:05 PM"
// For de-DE: "14:05"
// For ja-JP: "14:05"

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

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

يتضمن إنشاء مثيلات 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));
});
// Output for en-US:
// "9:00 AM"
// "2:30 PM"
// "6:45 PM"

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

ما يجب تذكره

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

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

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

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

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