كيف تقوم بتنسيق الوقت النسبي كأمس أو قبل يوم واحد؟

مقدمة

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

توفر JavaScript التحكم في خيار التنسيق هذا من خلال واجهة برمجة التطبيقات Intl.RelativeTimeFormat. أنت تقرر ما إذا كان المستخدمون سيرون تعبيرات طبيعية مثل "أمس" أو تعبيرات رقمية مثل "قبل يوم واحد". يؤثر هذا القرار على مدى رسمية أو عفوية واجهتك.

خيار numeric يتحكم في نمط التنسيق

يحدد خيار numeric في Intl.RelativeTimeFormat تنسيق الإخراج. يقبل هذا الخيار قيمتين.

تنتج القيمة auto تعبيرات لغة طبيعية عندما تكون موجودة. تنتج القيمة always تعبيرات رقمية في جميع الحالات.

const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

ينتج هذان المنسقان مخرجات مختلفة لنفس قيم الوقت.

استخدم auto لإظهار أمس وغداً

اضبط numeric على auto عندما تريد تعبيرات لغة طبيعية. ينتج المنسق "أمس" و"اليوم" و"غداً" لقيم الأيام -1 و0 و1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

rtf.format(-1, 'day');  // "yesterday"
rtf.format(0, 'day');   // "today"
rtf.format(1, 'day');   // "tomorrow"

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

rtf.format(-2, 'day');  // "2 days ago"
rtf.format(2, 'day');   // "in 2 days"

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

استخدم always لإظهار القيم الرقمية

اضبط numeric على always عندما تريد إخراجاً رقمياً متسقاً. ينتج المنسق تعبيرات رقمية لجميع القيم، بما في ذلك -1 و0 و1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

rtf.format(-1, 'day');  // "1 day ago"
rtf.format(0, 'day');   // "in 0 days"
rtf.format(1, 'day');   // "in 1 day"

تعمل القيمة always كقيمة افتراضية عند حذف خيار numeric.

const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day');  // "1 day ago"

يضمن هذا الإعداد الافتراضي تنسيقاً رقمياً متسقاً ما لم تختر صراحةً التعبيرات الطبيعية.

توجد تعبيرات زمنية طبيعية في لغات أخرى

اللغات بخلاف الإنجليزية لديها تعبيراتها الزمنية الطبيعية الخاصة. تستخدم الفرنسية "hier" للأمس، وتستخدم الإسبانية "ayer"، وتستخدم اليابانية "昨日".

const frenchRtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
frenchRtf.format(-1, 'day');  // "hier"
frenchRtf.format(1, 'day');   // "demain"

const spanishRtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
spanishRtf.format(-1, 'day');  // "ayer"
spanishRtf.format(1, 'day');   // "mañana"

const japaneseRtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
japaneseRtf.format(-1, 'day');  // "昨日"
japaneseRtf.format(1, 'day');   // "明日"

يعمل خيار numeric عبر جميع اللغات. يرى المستخدمون تعبيرات طبيعية بلغتهم الخاصة عند اختيار auto. ويرون تعبيرات رقمية بلغتهم الخاصة عند اختيار always.

اختر بناءً على نمط واجهتك

تستفيد الواجهات الرسمية من numeric: 'always'. تحتاج لوحات التحليلات وسجلات النظام والتقارير التقنية إلى تنسيق دقيق ومتسق. توفر القيم الرقمية هذه الدقة عبر جميع النطاقات الزمنية.

تستفيد الواجهات غير الرسمية من numeric: 'auto'. تخلق موجزات وسائل التواصل الاجتماعي وتطبيقات المراسلة ومنتديات المجتمع اتصالاً من خلال اللغة الطبيعية. تبدو تعبيرات مثل "أمس" و"غداً" أكثر إنسانية.

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

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