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

مقدمة

تظهر التواريخ بشكل مختلف حول العالم. يكتب الأمريكيون 15 مارس 2025 بصيغة 3/15/2025، بينما يكتب الأوروبيون نفس التاريخ بصيغة 15/03/2025، ويتوقع المستخدمون اليابانيون 2025/3/15. عندما تقوم ببرمجة صيغة تاريخ ثابتة، فأنت تفترض أن جميع المستخدمين يتبعون نفس الاتفاقية.

إظهار التواريخ بصيغة غير مألوفة يخلق الارتباك. المستخدم الذي يرى 3/15/2025 بينما يتوقع 15/03/2025 يجب أن يتوقف ليفك شفرة ما إذا كان التاريخ يمثل 15 مارس أو التاريخ المستحيل للشهر الخامس عشر. هذا العبء المعرفي يتضاعف عبر كل تاريخ في تطبيقك.

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

لماذا تختلف صيغ التاريخ حسب اللغة المحلية

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

في الولايات المتحدة، تتبع التواريخ نمط الشهر-اليوم-السنة. يظهر 15 مارس 2025 بصيغة 3/15/2025.

في معظم الدول الأوروبية بما في ذلك المملكة المتحدة وألمانيا وفرنسا وإسبانيا، تتبع التواريخ نمط اليوم-الشهر-السنة. يظهر نفس التاريخ بصيغة 15/03/2025.

في اليابان والصين وكوريا، تتبع التواريخ نمط السنة-الشهر-اليوم. يظهر التاريخ بصيغة 2025/3/15.

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

تختلف أسماء الأشهر أيضًا حسب اللغة. يظهر مارس باسم "March" بالإنجليزية، و"März" بالألمانية، و"mars" بالفرنسية، و"marzo" بالإسبانية، و"3月" باليابانية.

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

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

يقوم مُنشئ Intl.DateTimeFormat بإنشاء منسق تاريخ يطبق الاصطلاحات الخاصة باللغة المحلية. قم بتمرير معرف اللغة المحلية كوسيط أول، ثم استدعاء طريقة format() مع كائن Date.

const formatter = new Intl.DateTimeFormat('en-US');
const date = new Date('2025-03-15');
console.log(formatter.format(date));
// Output: "3/15/2025"

هذا ينشئ منسقًا للغة الإنجليزية الأمريكية، والتي تستخدم نمط الشهر-اليوم-السنة مع الشرطات المائلة. تقوم طريقة format() بتحويل كائن Date إلى سلسلة نصية بالتنسيق المناسب.

يقبل مُنشئ Date سلسلة تاريخ بتنسيق ISO 8601 مثل 2025-03-15. هذا ينشئ كائن Date يمثل 15 مارس 2025 عند منتصف الليل بتوقيت UTC. ثم يقوم المنسق بتحويل هذا إلى سلسلة نصية خاصة باللغة المحلية.

تنسيق نفس التاريخ للغات محلية مختلفة

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

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

const usFormatter = new Intl.DateTimeFormat('en-US');
console.log(usFormatter.format(date));
// Output: "3/15/2025"

const gbFormatter = new Intl.DateTimeFormat('en-GB');
console.log(gbFormatter.format(date));
// Output: "15/03/2025"

const deFormatter = new Intl.DateTimeFormat('de-DE');
console.log(deFormatter.format(date));
// Output: "15.3.2025"

const jpFormatter = new Intl.DateTimeFormat('ja-JP');
console.log(jpFormatter.format(date));
// Output: "2025/3/15"

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

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

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

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

const userLocale = navigator.language;
const formatter = new Intl.DateTimeFormat(userLocale);
const date = new Date('2025-03-15');

console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "3/15/2025"
// For en-GB: "15/03/2025"
// For de-DE: "15.3.2025"
// For ja-JP: "2025/3/15"

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

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

const formatter = new Intl.DateTimeFormat(navigator.languages);
const date = new Date('2025-03-15');
console.log(formatter.format(date));

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

فهم ما تنسقه واجهة برمجة التطبيقات

تقوم واجهة برمجة التطبيقات Intl.DateTimeFormat بتنسيق كائنات التاريخ في جافا سكريبت. يمثل كائن التاريخ لحظة محددة في الزمن، بما في ذلك معلومات التاريخ والوقت والمنطقة الزمنية.

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

const formatter = new Intl.DateTimeFormat('en-US');

const dateWithTime = new Date('2025-03-15T14:30:00');
console.log(formatter.format(dateWithTime));
// الناتج: "3/15/2025"

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

إنشاء تواريخ للتنسيق

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

const date1 = new Date('2025-03-15');
const date2 = new Date('2025-12-31');
const date3 = new Date('2025-01-01');

const formatter = new Intl.DateTimeFormat('en-US');

console.log(formatter.format(date1));
// الناتج: "3/15/2025"

console.log(formatter.format(date2));
// الناتج: "12/31/2025"

console.log(formatter.format(date3));
// الناتج: "1/1/2025"

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

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

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

const timestamp = 1710489600000; // 15 مارس 2025
const date = new Date(timestamp);

const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date));
// الناتج: "3/15/2025"

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

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

const formatter = new Intl.DateTimeFormat('en-US');
const timestamp = 1710489600000;

console.log(formatter.format(timestamp));
// الناتج: "3/15/2025"

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

تنسيق التاريخ الحالي

لتنسيق التاريخ الحالي، قم بإنشاء كائن Date بدون وسائط. هذا ينشئ كائن Date يمثل اللحظة الحالية.

const formatter = new Intl.DateTimeFormat('en-US');
const now = new Date();

console.log(formatter.format(now));
// الناتج: "10/15/2025" (أو التاريخ الحالي عند التشغيل)

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

const formatter = new Intl.DateTimeFormat('en-US');

console.log(formatter.format(Date.now()));
// الناتج: "10/15/2025" (أو التاريخ الحالي عند التشغيل)

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

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

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

const formatter = new Intl.DateTimeFormat('en-US');

const dates = [
  new Date('2025-01-01'),
  new Date('2025-06-15'),
  new Date('2025-12-31')
];

dates.forEach(date => {
  console.log(formatter.format(date));
});
// الناتج:
// "1/1/2025"
// "6/15/2025"
// "12/31/2025"

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

تنسيق التواريخ في القوالب

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

const formatter = new Intl.DateTimeFormat(navigator.language);

const publishedDate = new Date('2025-03-15');
const updatedDate = new Date('2025-04-20');

document.getElementById('published').textContent = formatter.format(publishedDate);
document.getElementById('updated').textContent = formatter.format(updatedDate);

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