كيف أعرض أجزاء محددة فقط من التاريخ؟
استخدم خيارات Intl.DateTimeFormat لعرض مكونات التاريخ الفردية مثل السنة والشهر واليوم ويوم الأسبوع
مقدمة
تعمل تنسيقات التاريخ الكاملة مثل "الثلاثاء، 15 أكتوبر، 2024" بشكل جيد في بعض السياقات، ولكن غالبًا ما تحتاج إلى عرض أجزاء معينة فقط من التاريخ. قد ترغب في إظهار الشهر والسنة فقط لتاريخ النشر، أو يوم الأسبوع فقط للتقويم، أو اليوم والشهر فقط لتاريخ الميلاد.
توفر واجهة Intl.DateTimeFormat في جافا سكريبت خيارات فردية لكل مكون من مكونات التاريخ. بدلاً من اختيار نمط معد مسبقًا مثل "كامل" أو "قصير"، يمكنك تحديد الأجزاء التي تريد تضمينها بالضبط وكيفية تنسيق كل منها.
فهم مكونات التاريخ
يحتوي التاريخ على أربعة مكونات أساسية يمكنك تنسيقها بشكل مستقل.
يُظهر weekday أي يوم من أيام الأسبوع. يُظهر year أي سنة. يُظهر month أي شهر من السنة. يُظهر day أي يوم من الشهر.
يقبل كل مكون قيم تنسيق مختلفة تتحكم في كيفية عرضه. يمكنك تضمين المكونات التي تحتاجها فقط في كائن الخيارات.
تنسيق يوم الأسبوع
يعرض خيار weekday يوم الأسبوع. وهو يقبل ثلاث قيم تتحكم في طول المخرجات.
const date = new Date('2024-10-15');
const narrow = new Intl.DateTimeFormat('en-US', {
weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"
const short = new Intl.DateTimeFormat('en-US', {
weekday: 'short'
});
console.log(short.format(date)); // "Tue"
const long = new Intl.DateTimeFormat('en-US', {
weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"
تنتج قيمة narrow حرفًا واحدًا. تنتج قيمة short اسمًا مختصرًا. تنتج قيمة long اسم يوم الأسبوع الكامل.
يمكن أن يكون ليومين من أيام الأسبوع نفس النمط الضيق في بعض اللغات المحلية. على سبيل المثال، يبدأ كل من الثلاثاء والخميس بحرف "T" في اللغة الإنجليزية.
تنسيق السنة
يعرض خيار year السنة. وهو يقبل قيمتين.
const date = new Date('2024-10-15');
const numeric = new Intl.DateTimeFormat('en-US', {
year: 'numeric'
});
console.log(numeric.format(date)); // "2024"
const twoDigit = new Intl.DateTimeFormat('en-US', {
year: '2-digit'
});
console.log(twoDigit.format(date)); // "24"
تعرض قيمة numeric السنة كاملة. بينما تعرض قيمة 2-digit الرقمين الأخيرين فقط.
تنسيق الشهر
يعرض خيار month شهر السنة. وهو يقبل خمس قيم توفر مستويات مختلفة من التفاصيل.
const date = new Date('2024-10-15');
const numeric = new Intl.DateTimeFormat('en-US', {
month: 'numeric'
});
console.log(numeric.format(date)); // "10"
const twoDigit = new Intl.DateTimeFormat('en-US', {
month: '2-digit'
});
console.log(twoDigit.format(date)); // "10"
const narrow = new Intl.DateTimeFormat('en-US', {
month: 'narrow'
});
console.log(narrow.format(date)); // "O"
const short = new Intl.DateTimeFormat('en-US', {
month: 'short'
});
console.log(short.format(date)); // "Oct"
const long = new Intl.DateTimeFormat('en-US', {
month: 'long'
});
console.log(long.format(date)); // "October"
تعرض قيمة numeric الشهر كرقم بدون أصفار في البداية. وتعرض قيمة 2-digit الشهر كرقم مع أصفار في البداية. وتنتج قيمة narrow حرفًا واحدًا. وتنتج قيمة short اسم شهر مختصر. وتنتج قيمة long اسم الشهر كاملًا.
يمكن أن يكون لشهرين نفس النمط الضيق في بعض اللغات. على سبيل المثال، مارس ومايو يبدآن بحرف "M" في اللغة الإنجليزية.
تنسيق اليوم
يعرض خيار day يوم الشهر. وهو يقبل قيمتين.
const date = new Date('2024-10-15');
const numeric = new Intl.DateTimeFormat('en-US', {
day: 'numeric'
});
console.log(numeric.format(date)); // "15"
const twoDigit = new Intl.DateTimeFormat('en-US', {
day: '2-digit'
});
console.log(twoDigit.format(date)); // "15"
تعرض قيمة numeric اليوم بدون أصفار في البداية. وتعرض قيمة 2-digit اليوم مع أصفار في البداية.
بالنسبة للأيام ذات الرقم الواحد، تنتج numeric قيمًا مثل "5" بينما تنتج 2-digit قيمة "05".
دمج أجزاء متعددة من التاريخ
يمكنك تحديد خيارات متعددة في منسق واحد لإظهار التركيبة التي تحتاجها بالضبط.
const date = new Date('2024-10-15');
// الشهر والسنة فقط
const monthYear = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"
// يوم الأسبوع واليوم فقط
const weekdayDay = new Intl.DateTimeFormat('en-US', {
weekday: 'short',
day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"
// الشهر واليوم فقط
const monthDay = new Intl.DateTimeFormat('en-US', {
month: 'long',
day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"
// جميع المكونات مع تنسيق مخصص
const custom = new Intl.DateTimeFormat('en-US', {
weekday: 'long',
year: 'numeric',
month: 'short',
day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"
يقوم المنسق تلقائيًا بترتيب المكونات وفقًا لاتفاقيات اللغة المحلية. لا تحتاج إلى القلق بشأن الترتيب أو علامات الترقيم.
كيف تعمل الخيارات عبر اللغات المختلفة
تنتج نفس الخيارات مخرجات مختلفة في لغات مختلفة. تتبع كل لغة اتفاقياتها الخاصة لترتيب وتنسيق أجزاء التاريخ.
const date = new Date('2024-10-15');
const options = {
year: 'numeric',
month: 'long',
day: 'numeric'
};
const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"
const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"
const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"
const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"
تضع اللغة الألمانية اليوم أولاً وتستخدم فاصلة نقطية. تستخدم اليابانية ترتيب سنة-شهر-يوم مع الأحرف اليابانية. تستخدم العربية النص العربي لكل من اسم الشهر والأرقام.
تتغير أيضًا أسماء أيام الأسبوع والشهور بناءً على اللغة.
const date = new Date('2024-10-15');
const options = {
weekday: 'long',
month: 'long'
};
const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"
const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"
const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"
تستخدم الفرنسية أحرفًا صغيرة لكل من أسماء أيام الأسبوع والشهور. تستخدم الإسبانية أيضًا أحرفًا صغيرة ولكنها تتضمن فاصلة كفاصل.
حالات الاستخدام الشائعة
يعمل عرض الشهر والسنة بشكل جيد لتواريخ النشر وقوائم الأرشيف.
const date = new Date('2024-10-15');
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long'
});
console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"
يعمل عرض أسماء أيام الأسبوع بشكل جيد للتقويمات والجداول الزمنية.
const date = new Date('2024-10-15');
const formatter = new Intl.DateTimeFormat('en-US', {
weekday: 'long'
});
console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"
يعمل عرض الشهر واليوم بدون السنة بشكل جيد لأعياد الميلاد والمناسبات السنوية.
const date = new Date('2024-10-15');
const formatter = new Intl.DateTimeFormat('en-US', {
month: 'long',
day: 'numeric'
});
console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"
الملخص
يتيح لك كائن خيارات Intl.DateTimeFormat عرض أجزاء محددة من التاريخ بدلاً من التاريخ الكامل. يقبل خيار weekday القيم narrow أو short أو long. يقبل خيار year القيم numeric أو 2-digit. يقبل خيار month القيم numeric أو 2-digit أو narrow أو short أو long. يقبل خيار day القيم numeric أو 2-digit.
يمكنك الجمع بين خيارات متعددة لعرض الأجزاء التي تحتاجها بالضبط. يتعامل المنسق تلقائيًا مع الترتيب وعلامات الترقيم بناءً على اللغة المحلية. تستخدم اللغات المحلية المختلفة اصطلاحات مختلفة لعرض نفس مكونات التاريخ.