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

مقدمة

تظهر الأوقات بشكل مختلف حول العالم. يرى الأمريكيون عادةً الساعة 3:30 مساءً معروضة كـ 3:30 PM، بينما يتوقع معظم الأوروبيين 15:30. عندما تقوم بتثبيت تنسيق الوقت في الكود، فإنك تفترض أن جميع المستخدمين يتبعون نفس الاتفاقية.

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

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

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

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

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

في معظم الدول الأوروبية وأمريكا اللاتينية وآسيا، تستخدم الأوقات تنسيق 24 ساعة بدون مؤشرات AM أو PM. يظهر نفس الوقت كـ 15:30.

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

تختلف أيضًا طريقة ظهور AM وPM. تستخدم الإنجليزية AM وPM، وتستخدم الإسبانية a.m. وp.m.، وتضع بعض اللغات هذه المؤشرات قبل الوقت بدلاً من بعده.

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

استخدام Intl.DateTimeFormat لتنسيق الأوقات

ينشئ المُنشئ Intl.DateTimeFormat مُنسِّقاً يطبق الاصطلاحات الخاصة بالمنطقة. لتنسيق الأوقات، مرر معرف المنطقة كوسيطة أولى وحدد الخيارات المتعلقة بالوقت في الوسيطة الثانية.

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

const date = new Date('2025-03-15T15:30:00');
console.log(formatter.format(date));
// Output: "3:30 PM"

ينشئ هذا مُنسِّقاً للإنجليزية الأمريكية يعرض الساعات والدقائق. يخبر خيارا hour وminute المُنسِّق بتضمين هذه المكونات. تحول طريقة format() كائن Date إلى سلسلة نصية بالتنسيق المناسب.

يقبل مُنشئ Date سلسلة نصية للتاريخ والوقت بتنسيق ISO 8601 مثل 2025-03-15T15:30:00. ينشئ هذا كائن Date يمثل الساعة 3:30 مساءً في 15 مارس 2025. يحول المُنسِّق بعد ذلك هذا إلى سلسلة نصية للوقت خاصة بالمنطقة.

تنسيق نفس الوقت لمناطق مختلفة

يمكنك تنسيق نفس الوقت لمناطق مختلفة عن طريق تغيير معرف المنطقة الممرر إلى المُنشئ.

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

const usFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(usFormatter.format(date));
// Output: "3:30 PM"

const gbFormatter = new Intl.DateTimeFormat('en-GB', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(gbFormatter.format(date));
// Output: "15:30"

const deFormatter = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(deFormatter.format(date));
// Output: "15:30"

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(frFormatter.format(date));
// Output: "15:30"

يطبق كل مُنسِّق اصطلاحات مختلفة. يستخدم المُنسِّق الأمريكي تنسيق 12 ساعة مع AM/PM. تستخدم المُنسِّقات البريطانية والألمانية والفرنسية جميعها تنسيق 24 ساعة بدون مؤشرات AM/PM.

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

تضمين الثواني في عرض الوقت

يمكنك إضافة خيار second لعرض الثواني مع الساعات والدقائق.

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

const date = new Date('2025-03-15T15:30:45');
console.log(formatter.format(date));
// Output: "3:30:45 PM"

يعمل خيار second بنفس طريقة hour وminute. اضبطه على 'numeric' لتضمين الثواني في الناتج.

التحكم في إضافة الأصفار للأرقام باستخدام 2-digit

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

const date = new Date('2025-03-15T09:05:03');

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});
console.log(numericFormatter.format(date));
// Output: "9:05:03 AM"

const twoDigitFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});
console.log(twoDigitFormatter.format(date));
// Output: "09:05:03 AM"

يعرض المنسق الرقمي 9:05:03 AM برقم واحد للساعة. يعرض المنسق ذو الرقمين 09:05:03 AM مع صفر بادئ للساعة. كلاهما يعرض رقمين للدقائق والثواني لأن هذه القيم عادةً ما تُضاف لها أصفار بغض النظر عن الإعداد.

فرض تنسيق 12 ساعة أو 24 ساعة

بشكل افتراضي، تستخدم الواجهة البرمجية تنسيق الوقت المفضل للغة المحلية. يمكنك تجاوز ذلك باستخدام الخيار hour12.

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

const hour12Formatter = new Intl.DateTimeFormat('en-GB', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true
});
console.log(hour12Formatter.format(date));
// Output: "3:30 pm"

const hour24Formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: false
});
console.log(hour24Formatter.format(date));
// Output: "15:30"

يفرض تعيين hour12: true تنسيق 12 ساعة حتى للغات المحلية التي تستخدم عادةً تنسيق 24 ساعة. يفرض تعيين hour12: false تنسيق 24 ساعة حتى للغات المحلية التي تستخدم عادةً تنسيق 12 ساعة.

لا تزال اللغة المحلية تحدد تفاصيل التنسيق الأخرى مثل علامات الترقيم والمسافات. يعرض المنسق البريطاني مع hour12: true النتيجة 3:30 pm مع pm بأحرف صغيرة، بينما يعرض المنسق الأمريكي 3:30 PM مع PM بأحرف كبيرة.

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

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

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

const date = new Date('2025-03-15T15:30:00');
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "3:30 PM"
// For en-GB: "15:30"
// For de-DE: "15:30"
// For fr-FR: "15:30"

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

يمكنك أيضًا تمرير المصفوفة الكاملة للغات المفضلة لتمكين سلوك الاحتياطي.

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

const date = new Date('2025-03-15T15:30:00');
console.log(formatter.format(date));

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

إنشاء أوقات للتنسيق

يمكنك إنشاء كائنات Date تحتوي على معلومات الوقت بعدة طرق. النهج الأكثر موثوقية هو استخدام سلاسل التاريخ والوقت بتنسيق ISO 8601.

const time1 = new Date('2025-03-15T09:00:00');
const time2 = new Date('2025-03-15T15:30:00');
const time3 = new Date('2025-03-15T23:45:30');

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

console.log(formatter.format(time1));
// Output: "9:00 AM"

console.log(formatter.format(time2));
// Output: "3:30 PM"

console.log(formatter.format(time3));
// Output: "11:45 PM"

تستخدم سلاسل التاريخ والوقت بتنسيق ISO 8601 صيغة YYYY-MM-DDTHH:MM:SS. يفصل T التاريخ عن الوقت. هذا التنسيق واضح ويعمل بشكل متسق عبر جميع اللغات والمناطق الزمنية.

تنسيق الأوقات من الطوابع الزمنية

يمكنك أيضًا إنشاء كائنات Date من طوابع Unix الزمنية. يمثل طابع Unix الزمني عدد الميلي ثانية منذ 1 يناير 1970 بتوقيت UTC.

const timestamp = 1710515400000; // March 15, 2025 at 3:30 PM
const date = new Date(timestamp);

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric'
});
console.log(formatter.format(date));
// Output: "3:30 PM"

يعمل هذا النهج عندما تتلقى طوابع زمنية من واجهات برمجة التطبيقات أو قواعد البيانات أو الأنظمة الأخرى التي تمثل الأوقات كأرقام.

يمكنك أيضًا تمرير الطابع الزمني مباشرة إلى طريقة format() دون إنشاء كائن Date أولاً.

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

const timestamp = 1710515400000;
console.log(formatter.format(timestamp));
// Output: "3:30 PM"

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

تنسيق الوقت الحالي

لتنسيق الوقت الحالي، أنشئ كائن Date بدون معاملات. ينشئ هذا كائن Date يمثل اللحظة الحالية.

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

const now = new Date();
console.log(formatter.format(now));
// Output: "3:45:12 PM" (or current time when run)

يمكنك أيضًا تمرير Date.now() مباشرة، والذي يُرجع الطابع الزمني الحالي كرقم.

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

console.log(formatter.format(Date.now()));
// Output: "3:45:12 PM" (or current time when run)

ينتج كلا النهجين نتائج متطابقة.

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

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

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

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

times.forEach(time => {
  console.log(formatter.format(time));
});
// Output:
// "9:00 AM"
// "12:30 PM"
// "6:45 PM"

هذا النهج أكثر كفاءة من إنشاء منسق جديد لكل وقت. يصبح الفرق في الأداء كبيراً عند تنسيق مصفوفات تحتوي على مئات أو آلاف من قيم الوقت.

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

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

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

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

document.getElementById('start-time').textContent = formatter.format(eventStart);
document.getElementById('end-time').textContent = formatter.format(eventEnd);

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