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

مقدمة

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

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

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

ما هي dateStyle و timeStyle

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

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

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

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

console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"

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

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

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

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

يوفر النمط "medium" تفاصيل معتدلة. غالبًا ما يتضمن أسماء أشهر مختصرة ودقة زمنية متوازنة.

يضيف النمط "long" مزيدًا من السياق. عادةً ما يكتب أسماء الأشهر بالكامل ويتضمن مكونات إضافية مثل معلومات المنطقة الزمنية.

ينتج النمط "full" التمثيل الأكثر اكتمالاً. يتضمن جميع المكونات ذات الصلة مثل أسماء أيام الأسبوع وأسماء الأشهر الكاملة وأسماء المناطق الزمنية الكاملة.

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

تنسيق التواريخ باستخدام dateStyle

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

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

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

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

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

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

console.log(shortFormatter.format(date));
// Output: "3/15/25"

console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Output: "March 15, 2025"

console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"

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

تنسيق الأوقات باستخدام 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:00");

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

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

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

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

// Output:
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

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

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

يتكيف تنسيق الوقت أيضاً مع اتفاقيات اللغة. تستخدم بعض اللغات ساعات 12 ساعة مع مؤشرات صباحاً/مساءً، بينما تستخدم أخرى ساعات 24 ساعة.

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 ساعة مع صباحاً/مساءً. تستخدم الألمانية والفرنسية واليابانية تنسيق 24 ساعة. يضيف النمط الطويل معلومات المنطقة الزمنية مع التنسيق المناسب لكل لغة.

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

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

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

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

const events = [
  { name: "Team meeting", date: new Date("2025-03-15") },
  { name: "Project deadline", date: new Date("2025-03-28") },
  { name: "Conference", date: new Date("2025-04-05") }
];

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

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

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

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

استخدم نمط التاريخ المتوسط عندما تكون لديك مساحة معتدلة وتريد أن تكون التواريخ أكثر قابلية للقراءة من التنسيقات الرقمية البحتة. تساعد أسماء الأشهر المختصرة المستخدمين على تحديد الأشهر بسرعة أكبر من الأرقام.

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

const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"

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

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

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

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

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

const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"

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

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

const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"

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

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

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

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

const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"

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

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"

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

فهم القيود

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

لن يعمل هذا:

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Error: cannot combine
});

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

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

const formatter = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date("2025-03-15")));
// Output: "Saturday, March 15, 2025"

يمكنك استخدام 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, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For fr-FR: "15 mars 2025 à 14:30"

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

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

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

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

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

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"

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

ما يجب تذكره

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

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

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

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