كيفية التبديل بين تنسيق الوقت بنظام 12 ساعة و24 ساعة

مقدمة

يظهر الوقت بشكل مختلف حول العالم. عادة ما يرى الأمريكيون 2:30 PM، بينما يرى الألمان 14:30، وكلاهما يمثل نفس اللحظة. عندما تعرض الأوقات بتنسيق واحد فقط، فأنت تفترض أن جميع المستخدمين يتبعون نفس الاتفاقية.

إظهار الأوقات بتنسيق غير مألوف يخلق احتكاكًا. المستخدم الذي يتوقع رؤية 14:30 ولكنه يرى 2:30 PM يجب عليه تحويل الوقت ذهنيًا. والمستخدم الذي يتوقع 2:30 PM ولكنه يرى 14:30 يواجه نفس المشكلة. يتكرر هذا العبء المعرفي مع كل وقت يتم عرضه في تطبيقك.

توفر جافا سكريبت واجهة برمجة التطبيقات Intl.DateTimeFormat للتعامل مع تنسيق الوقت تلقائيًا. يشرح هذا الدرس سبب اختلاف تنسيقات الوقت، وكيف تتحكم واجهة البرمجة في عرض نظام 12 ساعة مقابل نظام 24 ساعة، ومتى يجب تجاوز الإعدادات الافتراضية للغة.

لماذا تختلف تنسيقات الوقت حسب اللغة

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

في الولايات المتحدة وكندا وأستراليا والفلبين، يعتبر تنسيق 12 ساعة مع مؤشرات AM/PM هو المعيار. تظهر ساعة بعد الظهر كـ 2:30 PM.

في معظم أنحاء أوروبا وأمريكا اللاتينية وآسيا، يعتبر تنسيق 24 ساعة هو المعيار. يظهر نفس الوقت كـ 14:30 دون الحاجة إلى مؤشر AM/PM.

تستخدم بعض المناطق كلا التنسيقين حسب السياق. تستخدم المملكة المتحدة تنسيق 24 ساعة لجداول النقل ولكنها تستخدم تنسيق 12 ساعة للمحادثات اليومية.

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

ماذا تعني تنسيقات 12 ساعة و24 ساعة

يقسم تنسيق 12 ساعة اليوم إلى فترتين مدة كل منهما 12 ساعة. تمتد الساعات من 12 إلى 11، ثم تبدأ من جديد. يستخدم النظام AM (قبل الظهر) من منتصف الليل إلى الظهر و PM (بعد الظهر) من الظهر إلى منتصف الليل. يبدأ منتصف الليل في الساعة 12:00 AM ويحدث الظهر في الساعة 12:00 PM.

12:00 AM → منتصف الليل
1:00 AM → ساعة واحدة بعد منتصف الليل
11:59 AM → دقيقة واحدة قبل الظهر
12:00 PM → الظهر
1:00 PM → ساعة واحدة بعد الظهر
11:59 PM → دقيقة واحدة قبل منتصف الليل

يحسب تنسيق 24 ساعة الساعات بشكل مستمر من 0 إلى 23. يبدأ منتصف الليل في الساعة 00:00 وينتهي اليوم في الساعة 23:59. لا حاجة لمؤشر AM/PM لأن كل ساعة لها رقم فريد.

00:00 → منتصف الليل
01:00 → ساعة واحدة بعد منتصف الليل
11:59 → دقيقة واحدة قبل الظهر
12:00 → الظهر
13:00 → ساعة واحدة بعد الظهر
23:59 → دقيقة واحدة قبل منتصف الليل

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

استخدام خيار hour12 للتحكم في تنسيق الوقت

يتحكم خيار hour12 في ما إذا كان سيتم استخدام تنسيق 12 ساعة. قم بتعيينه إلى true لتنسيق 12 ساعة مع صباحًا/مساءً، أو false لتنسيق 24 ساعة.

const date = new Date('2025-03-15T14:30:00');

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

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

console.log(format12.format(date));
// Output: "2:30 PM"

console.log(format24.format(date));
// Output: "14:30"

يتجاوز خيار hour12 السلوك الافتراضي للغة. على الرغم من أن اللغة الإنجليزية الأمريكية تستخدم عادةً تنسيق 12 ساعة، فإن تعيين hour12: false يفرض تنسيق 24 ساعة.

يجب تضمين إما hour في الخيارات أو استخدام timeStyle لكي يكون لخيار hour12 تأثير. بدون مكون زمني في الإخراج، لن يكون للخيار أي تأثير.

استخدام خيار hourCycle للتحكم الدقيق

يوفر خيار hourCycle تحكمًا أكثر من hour12 من خلال تحديد كيفية عد الساعات بالضبط. يقبل أربع قيم: "h11" و"h12" و"h23" و"h24".

const date = new Date('2025-03-15T00:30:00'); // 12:30 AM

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

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

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

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

console.log(h11.format(date));
// Output: "0:30 AM"

console.log(h12.format(date));
// Output: "12:30 AM"

console.log(h23.format(date));
// Output: "00:30"

console.log(h24.format(date));
// Output: "24:30"

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

فهم قيم hourCycle الأربعة

تحدد قيم hourCycle الأربعة كيفية ترقيم الساعات داخل كل فترة.

تستخدم قيمة "h12" تنسيق 12 ساعة مع ساعات من 1 إلى 12. يظهر منتصف الليل كـ 12:00 صباحًا ويظهر الظهر كـ 12:00 مساءً. هذا هو تنسيق الـ 12 ساعة القياسي المستخدم في الولايات المتحدة.

تستخدم قيمة "h11" تنسيق 12 ساعة مع ساعات من 0 إلى 11. يظهر منتصف الليل كـ 0:00 صباحًا ويظهر الظهر كـ 0:00 مساءً. هذا التنسيق أقل شيوعًا ولكنه يظهر في بعض السياقات.

تستخدم قيمة "h23" تنسيق 24 ساعة مع ساعات من 0 إلى 23. يظهر منتصف الليل كـ 00:00 وينتهي اليوم عند 23:59. هذا هو تنسيق الـ 24 ساعة القياسي المستخدم في معظم أوروبا وآسيا.

تستخدم قيمة "h24" تنسيق 24 ساعة مع ساعات من 1 إلى 24. يظهر منتصف الليل كـ 24:00 من منظور اليوم السابق. هذا التنسيق نادر ولكنه يظهر في بعض السياقات التقنية.

تستخدم معظم التطبيقات إما "h12" لتنسيق 12 ساعة أو "h23" لتنسيق 24 ساعة.

مقارنة الساعات عند منتصف الليل عبر دورات الساعة

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

const midnight = new Date('2025-03-15T00:00:00');

const cycles = ['h11', 'h12', 'h23', 'h24'];

cycles.forEach(cycle => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hourCycle: cycle
  });

  console.log(`${cycle}: ${formatter.format(midnight)}`);
});

// Output:
// h11: 0:00:00 AM
// h12: 12:00:00 AM
// h23: 00:00:00
// h24: 24:00:00

تنتج قيم h12 وh23 التمثيلات الأكثر شيوعًا لتنسيقاتها المعنية.

مقارنة الساعات عند الظهر عبر دورات الساعة

يوضح الظهر أيضًا كيف تختلف دورات الساعات.

const noon = new Date('2025-03-15T12:00:00');

const cycles = ['h11', 'h12', 'h23', 'h24'];

cycles.forEach(cycle => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hourCycle: cycle
  });

  console.log(`${cycle}: ${formatter.format(noon)}`);
});

// Output:
// h11: 0:00:00 PM
// h12: 12:00:00 PM
// h23: 12:00:00
// h24: 12:00:00

مرة أخرى، ينتج h12 وh23 تمثيلات قياسية بينما يستخدم h11 الرقم 0 لساعة الظهر.

كيف تتفاعل hour12 وhourCycle

عندما تحدد كلاً من hour12 وhourCycle، فإن خيار hour12 يأخذ الأولوية ويتم تجاهل خيار hourCycle.

const date = new Date('2025-03-15T14:30:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true,
  hourCycle: 'h23'  // يتم تجاهل هذا
});

console.log(formatter.format(date));
// Output: "2:30 PM" (تنسيق 12 ساعة من hour12: true)

إعداد hour12: true يفرض تنسيق 12 ساعة، متجاوزًا إعداد hourCycle: 'h23' الذي من شأنه عادةً إنتاج تنسيق 24 ساعة.

عمليًا، استخدم إما hour12 للتحكم البسيط أو hourCycle للتحكم الدقيق، ولكن ليس كليهما معًا.

احترام الإعدادات الافتراضية للغة

عندما تحذف كلاً من hour12 وhourCycle، يستخدم المنسق تنسيق الوقت الافتراضي للغة.

const date = new Date('2025-03-15T14:30:00');

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

const deFormatter = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric'
});

const jpFormatter = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: 'numeric'
});

console.log(usFormatter.format(date));
// Output: "2:30 PM" (الافتراضي الأمريكي: 12 ساعة)

console.log(deFormatter.format(date));
// Output: "14:30" (الافتراضي الألماني: 24 ساعة)

console.log(jpFormatter.format(date));
// Output: "14:30" (الافتراضي الياباني: 24 ساعة)

اللغة الأمريكية تستخدم افتراضيًا تنسيق 12 ساعة بينما تستخدم اللغتان الألمانية واليابانية افتراضيًا تنسيق 24 ساعة. احترام هذه الإعدادات الافتراضية يوفر تجربة أكثر ألفة للمستخدمين في كل منطقة.

تجاوز الإعدادات الافتراضية للغة

يمكنك تجاوز تنسيق الوقت الافتراضي للغة عن طريق تعيين hour12 أو hourCycle بشكل صريح.

const date = new Date('2025-03-15T14:30:00');

// إجبار اللغة الألمانية على استخدام تنسيق 12 ساعة
const de12 = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});

// إجبار اللغة الأمريكية على استخدام تنسيق 24 ساعة
const us24 = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

console.log(de12.format(date));
// النتيجة: "2:30 PM"

console.log(us24.format(date));
// النتيجة: "14:30"

يعمل هذا النهج عندما تحتاج إلى فرض تنسيق وقت محدد بغض النظر عن لغة المستخدم.

متى يجب احترام الإعدادات الافتراضية للغة

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

دع المنسق يستخدم تنسيق الوقت الافتراضي للغة عند عرض الأوقات للمستخدمين في منطقتهم.

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

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

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

متى يجب تجاوز الإعدادات الافتراضية للغة

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

// استخدم دائمًا تنسيق 24 ساعة لأوقات الرحلات الجوية
const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});

const departureTime = new Date('2025-03-15T14:30:00');
console.log(`Departure: ${formatter.format(departureTime)}`);
// النتيجة: "Departure: 14:30" (لجميع اللغات)

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

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

function formatTime(date, userPrefers24Hour) {
  const formatter = new Intl.DateTimeFormat(navigator.language, {
    hour: 'numeric',
    minute: 'numeric',
    hour12: !userPrefers24Hour
  });

  return formatter.format(date);
}

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

console.log(formatTime(time, false));
// النتيجة: "2:30 PM"

console.log(formatTime(time, true));
// النتيجة: "14:30"

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

استخدام hour12 مع timeStyle

يعمل خيار hour12 مع أنماط timeStyle المعدة مسبقًا. هذا يتيح لك التحكم في تنسيق الوقت مع الاستمرار في استخدام الأنماط المعدة مسبقًا بشكل مريح.

const date = new Date('2025-03-15T14:30:45');

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

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

const medium12 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'medium',
  hour12: true
});

const medium24 = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'medium',
  hour12: false
});

console.log(short12.format(date));
// Output: "2:30 PM"

console.log(short24.format(date));
// Output: "14:30"

console.log(medium12.format(date));
// Output: "2:30:45 PM"

console.log(medium24.format(date));
// Output: "14:30:45"

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

تنسيق الأوقات للغات متعددة

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

const date = new Date('2025-03-15T14:30:00');

const locales = [
  { code: 'en-US', name: 'United States' },
  { code: 'en-GB', name: 'United Kingdom' },
  { code: 'de-DE', name: 'Germany' },
  { code: 'ja-JP', name: 'Japan' }
];

locales.forEach(locale => {
  const formatter = new Intl.DateTimeFormat(locale.code, {
    hour: 'numeric',
    minute: 'numeric'
  });

  console.log(`${locale.name}: ${formatter.format(date)}`);
});

// Output:
// United States: 2:30 PM
// United Kingdom: 14:30
// Germany: 14:30
// Japan: 14:30

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

التحقق من دورة الساعة المحددة

يمكنك التحقق من دورة الساعة التي يستخدمها المنسق فعليًا عن طريق استدعاء resolvedOptions().

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

const options = formatter.resolvedOptions();
console.log(options.hourCycle);
// Output: "h12"

console.log(options.hour12);
// Output: true

تعيد هذه الطريقة الإعدادات الفعلية التي يستخدمها المنسق بعد حل جميع الإعدادات الافتراضية للغة والخيارات الصريحة. يتضمن الكائن المُرجع خصائص hourCycle وhour12 عندما تكون مكونات الوقت موجودة.

تنسيق الأوقات في القوالب

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

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

const meetingTime = new Date('2025-03-15T14:30:00');
const deadlineTime = new Date('2025-03-15T17:00:00');

document.getElementById('meeting').textContent = formatter.format(meetingTime);
document.getElementById('deadline').textContent = formatter.format(deadlineTime);

تعمل السلاسل النصية المنسقة مثل أي قيمة نصية أخرى. يمكنك إدراجها في محتوى نصي، أو سمات، أو أي سياق تعرض فيه معلومات للمستخدمين.

ما يجب تذكره

استخدم خيار hour12 للتبديل بين تنسيق 12 ساعة و24 ساعة. اضبطه على true لتنسيق 12 ساعة مع صباحًا/مساءً أو false لتنسيق 24 ساعة.

استخدم خيار hourCycle للتحكم الدقيق في ترقيم الساعات. توفر القيمة "h12" تنسيق 12 ساعة قياسي و"h23" توفر تنسيق 24 ساعة قياسي.

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

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