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

مقدمة

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

توفر واجهة Intl.DateTimeFormat في جافا سكريبت أنماطًا معدة مسبقًا تجمع خيارات التنسيق الشائعة في خيارات بسيطة. بدلاً من تحديد أنك تريد ساعات رقمية ودقائق رقمية وثوانٍ رقمية، يمكنك طلب 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));
// تختلف المخرجات حسب اللغة المحلية للمستخدم
// للغة en-US: "2:30 PM"
// للغة de-DE: "14:30"
// للغة 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));
});
// المخرجات:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

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

ما يجب تذكره

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

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

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

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