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

مقدمة

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

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

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

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

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

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

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

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

تختلف أيضاً طريقة ظهور صباحاً ومساءً. تستخدم اللغة الإنجليزية 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));
// تختلف المخرجات حسب اللغة المحلية للمستخدم
// للغة en-US: "3:30 PM"
// للغة en-GB: "15:30"
// للغة de-DE: "15:30"
// للغة 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));
// المخرجات: "9:00 AM"

console.log(formatter.format(time2));
// المخرجات: "3:30 PM"

console.log(formatter.format(time3));
// المخرجات: "11:45 PM"

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

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

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

const timestamp = 1710515400000; // 15 مارس 2025 الساعة 3:30 مساءً
const date = new Date(timestamp);

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

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

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

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

const timestamp = 1710515400000;
console.log(formatter.format(timestamp));
// الناتج: "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));
// الناتج: "3:45:12 PM" (أو الوقت الحالي عند التشغيل)

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

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

console.log(formatter.format(Date.now()));
// الناتج: "3:45:12 PM" (أو الوقت الحالي عند التشغيل)

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

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

يتضمن إنشاء نسخة جديدة من 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));
});
// الناتج:
// "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);

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