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

مقدمة

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

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

توفر JavaScript واجهة برمجة التطبيقات 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 API اصطلاحات التنسيق المناسبة.

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

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

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

فهم ما تقوم واجهة API بتنسيقه

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

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

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

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

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

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

يمكنك إنشاء كائنات Date بعدة طرق. النهج الأكثر موثوقية هو استخدام سلاسل التاريخ بتنسيق 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));
// Output: "3/15/2025"

console.log(formatter.format(date2));
// Output: "12/31/2025"

console.log(formatter.format(date3));
// Output: "1/1/2025"

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

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

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

const timestamp = 1710489600000; // March 15, 2025
const date = new Date(timestamp);

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

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

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

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

console.log(formatter.format(timestamp));
// Output: "3/15/2025"

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

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

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

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

console.log(formatter.format(now));
// Output: "10/15/2025" (or current date when run)

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

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

console.log(formatter.format(Date.now()));
// Output: "10/15/2025" (or current date when run)

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

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

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

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