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

مقدمة

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

توفر جافا سكريبت التحكم في خيار التنسيق هذا من خلال واجهة برمجة التطبيقات 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');  // "أمس"
rtf.format(0, 'day');   // "اليوم"
rtf.format(1, 'day');   // "غدًا"

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

rtf.format(-2, 'day');  // "منذ يومين"
rtf.format(2, 'day');   // "خلال يومين"

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

استخدم دائمًا لعرض القيم الرقمية

قم بتعيين 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 عن قصد عندما تعزز اللغة الطبيعية واجهتك المحددة.