كيفية تنسيق الأوقات بأنماط قصيرة أو متوسطة أو طويلة أو كاملة

مقدمة

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

توفر Intl.DateTimeFormat في JavaScript أنماطاً محددة مسبقاً تجمع خيارات التنسيق الشائعة في خيارات بسيطة. بدلاً من تحديد أنك تريد ساعات رقمية ودقائق رقمية وثوانٍ رقمية، يمكنك طلب timeStyle: "medium". بدلاً من تكوين عرض الساعة والدقيقة بشكل منفصل، يمكنك طلب timeStyle: "short".

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

ما هو timeStyle

يتحكم خيار timeStyle في كيفية ظهور الأوقات. يؤثر على مكونات الوقت التي يتم عرضها ومدى تفصيلها. يقبل الخيار أربع قيم: "short"، "medium"، "long"، و"full".

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

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

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "2:30 PM"

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

فهم مستويات الأنماط الأربعة

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

ينتج نمط "short" مخرجات مدمجة تعرض الساعات والدقائق. يحذف معلومات الثواني والمنطقة الزمنية، مما يجعله مناسباً لمعظم احتياجات عرض الوقت اليومية.

يضيف نمط "medium" الثواني لتوفير مزيد من الدقة. لا يزال يحذف معلومات المنطقة الزمنية ولكنه يعطي التوقيت الدقيق حتى الثانية.

يضيف نمط "long" معلومات المنطقة الزمنية المختصرة. يتضمن الساعات والدقائق والثواني ورمز منطقة زمنية قصير مثل PST أو GMT.

ينتج نمط "full" التمثيل الأكثر اكتمالاً. يتضمن جميع مكونات الوقت مع كتابة المنطقة الزمنية بالكامل، مثل Pacific Standard Time.

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

تنسيق الأوقات باستخدام timeStyle

يتحكم خيار timeStyle في تنسيق الوقت. ينتج كل مستوى نمط مخرجات مختلفة لنفس الوقت.

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

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

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

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

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

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

console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"

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

دمج dateStyle و timeStyle

يمكنك استخدام كلا الخيارين معاً لتنسيق الطوابع الزمنية الكاملة. يطبق المنسق كلا النمطين بشكل مستقل.

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

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

console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"

يظهر التاريخ بتنسيق طويل بينما يستخدم الوقت تنسيقاً قصيراً. يوفر هذا المزيج سياقاً تفصيلياً للتاريخ مع الحفاظ على الوقت مختصراً.

يمكنك مزج أي نمط تاريخ مع أي نمط وقت بناءً على احتياجاتك.

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

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

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

كيف تختلف أنماط الوقت عبر اللغات المحلية

تقوم كل لغة محلية بتنسيق الأوقات وفقاً لاتفاقياتها الخاصة. ينتج النمط نفسه مخرجات مختلفة للغات محلية مختلفة، لكن مستوى التفاصيل النسبي يبقى ثابتاً.

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

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

تستخدم الإنجليزية الأمريكية تنسيق 12 ساعة مع AM/PM. تستخدم الألمانية والفرنسية واليابانية تنسيق 24 ساعة. يضيف النمط الطويل معلومات المنطقة الزمنية بتنسيق مناسب لكل لغة محلية.

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

متى تستخدم النمط القصير

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "short"
});

const meetings = [
  { title: "Team standup", time: new Date("2025-03-15T09:00:00") },
  { title: "Client call", time: new Date("2025-03-15T14:30:00") },
  { title: "Code review", time: new Date("2025-03-15T16:45:00") }
];

meetings.forEach(meeting => {
  console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});

// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM

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

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

متى تستخدم النمط المتوسط

يوفر النمط المتوسط دقة من المستوى الثاني مع الإبقاء على معلومات المنطقة الزمنية ضمنية. وهذا يجعله مناسبًا للسياقات التي يهم فيها التوقيت الدقيق ولكن يُفهم المنطقة الزمنية من السياق.

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "medium"
});

const activities = [
  { action: "User logged in", time: new Date("2025-03-15T09:15:23") },
  { action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
  { action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];

activities.forEach(activity => {
  console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});

// Output:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 9:22:11 AM

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

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

متى تستخدم النمط الطويل

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

استخدم نمط الوقت الطويل عند التنسيق عبر المناطق الزمنية أو عند عرض الأوقات التي قد تُفسر بشكل مختلف اعتمادًا على موقع المشاهد. يوفر رمز المنطقة الزمنية المختصر السياق دون شغل مساحة مفرطة.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const events = [
  { name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
  { name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.time)}`);
});

// Output:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 1:30:00 PM EST

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

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

متى تستخدم النمط الكامل

ينتج النمط الكامل التمثيل الأكثر اكتمالاً للوقت. فهو يكتب اسم المنطقة الزمنية الكامل، مما يزيل كل الغموض حول المنطقة الزمنية التي يمثلها الوقت.

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

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

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

فهم القيود

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

هذا لن يعمل:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // Error: cannot combine
});

يحدد خيار timeStyle بالفعل تنسيق الساعة. إضافة خيار hour صريح يخلق تعارضاً. ينطبق نفس القيد على خيارات المكونات الأخرى مثل minute أو second أو timeZoneName.

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

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

console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// Output: "02:30:45 PM"

يمكنك استخدام dateStyle و timeStyle معاً لأنهما يتحكمان في جوانب مختلفة من التنسيق. يمكنك أيضاً دمجهما مع خيارات لا تتعارض، مثل timeZone أو calendar أو numberingSystem.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "long",
  timeZone: "America/New_York"
});

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "March 15, 2025 at 2:30:45 PM EST"

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "short"
});

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

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

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  timeStyle: "medium"
});

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "short"
});

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

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

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

ما يجب تذكره

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

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

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

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