كيفية عرض الوقت النسبي بشكل قصير أو طويل

مقدمة

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

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

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

ما الذي يتحكم به خيار style

يقبل خيار style في Intl.RelativeTimeFormat ثلاث قيم: "long"، و"short"، و"narrow". تنتج كل قيمة مستوى مختلفًا من الإطناب لمخرجات الوقت النسبي.

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

const longFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(longFormatter.format(-2, "hour"));
// Output: "2 hours ago"

const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(shortFormatter.format(-2, "hour"));
// Output: "2 hr. ago"

const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(narrowFormatter.format(-2, "hour"));
// Output: "2h ago"

يكون خيار style افتراضيًا "long" إذا أغفلته. هذا يعني أن تنسيق الوقت النسبي يستخدم كلمات كاملة ما لم تطلب صراحةً نمط عرض مختلف.

تنسيق الوقت النسبي بالأسلوب الطويل

الأسلوب الطويل يكتب الكلمات كاملة. يوفر هذا التنسيق وضوحًا أقصى على حساب مساحة أفقية إضافية.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

يتعامل المنسق تلقائيًا مع صيغ المفرد والجمع. تستخدم الساعة الواحدة صيغة المفرد "hour" بينما تستخدم الساعات المتعددة صيغة الجمع "hours". لا تحتاج إلى تحديد الصيغة المناسبة يدويًا.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(formatter.format(-1, "hour"));
// Output: "1 hour ago"

console.log(formatter.format(-2, "hour"));
// Output: "2 hours ago"

console.log(formatter.format(1, "day"));
// Output: "in 1 day"

console.log(formatter.format(5, "day"));
// Output: "in 5 days"

يتم كتابة كل وحدة زمنية بالكامل بغض النظر عن الوحدة التي تستخدمها.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

console.log(formatter.format(-30, "second"));
// Output: "30 seconds ago"

console.log(formatter.format(-5, "minute"));
// Output: "5 minutes ago"

console.log(formatter.format(-3, "month"));
// Output: "3 months ago"

console.log(formatter.format(2, "year"));
// Output: "in 2 years"

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

تنسيق الوقت النسبي بالأسلوب القصير

يستخدم الأسلوب القصير اختصارات قياسية يعرفها معظم الناس. يوازن هذا التنسيق بين سهولة القراءة وكفاءة المساحة.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(formatter.format(-2, "hour"));
// Output: "2 hr. ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

يستخدم المنسق اختصارات معروفة بشكل شائع. تصبح الساعات "hr."، والدقائق تصبح "min."، والثواني تصبح "sec.". تحافظ هذه الاختصارات على سهولة القراءة مع تقليل عدد الأحرف.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(formatter.format(-30, "second"));
// Output: "30 sec. ago"

console.log(formatter.format(-5, "minute"));
// Output: "5 min. ago"

console.log(formatter.format(-3, "month"));
// Output: "3 mo. ago"

console.log(formatter.format(2, "year"));
// Output: "in 2 yr."

تستخدم كل وحدة زمنية اختصارها القياسي. تستخدم الثواني "sec."، والدقائق تستخدم "min."، والشهور تستخدم "mo."، والسنوات تستخدم "yr.". هذه الاختصارات معروفة على نطاق واسع وتعمل بشكل جيد في معظم السياقات.

يمكنك تنسيق كل من الأوقات الماضية والمستقبلية بالأسلوب القصير.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

console.log(formatter.format(-7, "day"));
// Output: "7 days ago"

console.log(formatter.format(2, "week"));
// Output: "in 2 wk."

console.log(formatter.format(-1, "quarter"));
// Output: "1 qtr. ago"

يتعامل المنسق مع كلا الاتجاهين بشكل متسق. تستخدم الأوقات الماضية "ago" بينما تستخدم الأوقات المستقبلية "in". تبقى الاختصارات كما هي بغض النظر عن الاتجاه.

تنسيق الوقت النسبي بالأسلوب الضيق

ينتج الأسلوب الضيق أكثر تمثيل مختصر ممكن. يزيل هذا التنسيق المسافات ويستخدم الحد الأدنى من الرموز لتوفير كل حرف.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format(-2, "hour"));
// Output: "2h ago"

console.log(formatter.format(3, "day"));
// Output: "in 3 days"

يستخدم المنسق اختصارات من حرف واحد ومسافات بالحد الأدنى لمعظم الوحدات. تصبح الساعات "h"، والدقائق تصبح "m"، والثواني تصبح "s". المخرجات أكثر اختصارًا من الأسلوب القصير أو الطويل.

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format(-30, "second"));
// Output: "30s ago"

console.log(formatter.format(-5, "minute"));
// Output: "5m ago"

console.log(formatter.format(-3, "month"));
// Output: "3mo ago"

console.log(formatter.format(2, "year"));
// Output: "in 2y"

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

const formatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format(-7, "day"));
// Output: "7 days ago"

console.log(formatter.format(2, "week"));
// Output: "in 2w"

console.log(formatter.format(-1, "quarter"));
// Output: "1q ago"

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

مقارنة بين الأساليب الطويلة والقصيرة والضيقة

تتضح الاختلافات بين خيارات الأسلوب الثلاثة عندما تقوم بتنسيق نفس الأوقات النسبية بكل خيار.

const longFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "long"
});

const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "short"
});

const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
  style: "narrow"
});

const value = -2;
const unit = "hour";

console.log("Long:   " + longFormatter.format(value, unit));
console.log("Short:  " + shortFormatter.format(value, unit));
console.log("Narrow: " + narrowFormatter.format(value, unit));

// Output:
// Long:   2 hours ago
// Short:  2 hr. ago
// Narrow: 2h ago

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

يمكنك مقارنة قيم الوقت النسبي المختلفة لمعرفة كيفية تعامل كل أسلوب مع فترات زمنية متنوعة.

const times = [
  { value: -30, unit: "second" },
  { value: -5, unit: "minute" },
  { value: -2, unit: "hour" },
  { value: 3, unit: "day" },
  { value: 2, unit: "week" },
  { value: -3, unit: "month" }
];

times.forEach(time => {
  const long = new Intl.RelativeTimeFormat("en-US", {
    style: "long"
  }).format(time.value, time.unit);

  const short = new Intl.RelativeTimeFormat("en-US", {
    style: "short"
  }).format(time.value, time.unit);

  const narrow = new Intl.RelativeTimeFormat("en-US", {
    style: "narrow"
  }).format(time.value, time.unit);

  console.log(`${time.value} ${time.unit}:`);
  console.log(`  Long:   ${long}`);
  console.log(`  Short:  ${short}`);
  console.log(`  Narrow: ${narrow}`);
  console.log("");
});

// Output:
// -30 second:
//   Long:   30 seconds ago
//   Short:  30 sec. ago
//   Narrow: 30s ago
//
// -5 minute:
//   Long:   5 minutes ago
//   Short:  5 min. ago
//   Narrow: 5m ago
//
// -2 hour:
//   Long:   2 hours ago
//   Short:  2 hr. ago
//   Narrow: 2h ago
//
// 3 day:
//   Long:   in 3 days
//   Short:  in 3 days
//   Narrow: in 3 days
//
// 2 week:
//   Long:   in 2 weeks
//   Short:  in 2 wk.
//   Narrow: in 2w
//
// -3 month:
//   Long:   3 months ago
//   Short:  3 mo. ago
//   Narrow: 3mo ago

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

كيف تختلف أنماط الوقت النسبي عبر اللغات

تتكيف خيارات الأسلوب الثلاثة مع اللغة المحلية التي تحددها. تستخدم اللغات المختلفة اختصارات وكلمات واتفاقيات تباعد مختلفة.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

const value = -2;
const unit = "hour";

locales.forEach(locale => {
  const longFormatter = new Intl.RelativeTimeFormat(locale, {
    style: "long"
  });

  const shortFormatter = new Intl.RelativeTimeFormat(locale, {
    style: "short"
  });

  console.log(locale + ":");
  console.log("  Long:  " + longFormatter.format(value, unit));
  console.log("  Short: " + shortFormatter.format(value, unit));
});

// Output:
// en-US:
//   Long:  2 hours ago
//   Short: 2 hr. ago
// de-DE:
//   Long:  vor 2 Stunden
//   Short: vor 2 Std.
// fr-FR:
//   Long:  il y a 2 heures
//   Short: il y a 2 h
// ja-JP:
//   Long:  2 時間前
//   Short: 2 時間前

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

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

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

const locales = ["en-US", "es-ES", "pt-BR"];

const value = -3;
const unit = "month";

locales.forEach(locale => {
  const narrowFormatter = new Intl.RelativeTimeFormat(locale, {
    style: "narrow"
  });

  console.log(locale + ": " + narrowFormatter.format(value, unit));
});

// Output:
// en-US: 3mo ago
// es-ES: hace 3 m
// pt-BR: há 3 meses

يُظهر الأسلوب الضيق تنوعًا عبر اللغات المحلية. تستخدم الإنجليزية "mo" للشهور، وتستخدم الإسبانية "m"، وتكتب البرتغالية "meses" بالكامل. تعكس هذه الاختلافات الاتفاقيات الخاصة باللغة المحلية لتدوين الوقت المختصر.

متى تستخدم النمط الطويل

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

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

يستفيد المحتوى التعليمي من النمط الطويل لأن المتعلمين قد لا يكونون على دراية باختصارات الوقت. يجب أن تكتب المواد التعليمية التي تشرح الطوابع الزمنية الوحدات بالكامل لتجنب الالتباس.

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

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

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

function formatActivityTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "long",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));

  return formatter.format(diffInHours, "hour");
}

const threeHoursAgo = new Date(Date.now() - 3 * 60 * 60 * 1000);

console.log("Activity: " + formatActivityTimestamp(threeHoursAgo, "en-US"));
// Output: "Activity: 3 hours ago"

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

متى تستخدم الأسلوب القصير

يعمل الأسلوب القصير بشكل أفضل في السياقات التي تهم فيها المساحة ولكن الاختصارات مفهومة على نطاق واسع. يوازن هذا التنسيق بين الوضوح والكفاءة.

تستفيد واجهات الهاتف المحمول من الأسلوب القصير لأن عرض الشاشة محدود. تحتاج بطاقات لوحة المعلومات التي تعرض طوابع زمنية متعددة إلى أوقات نسبية مضغوطة لتناسب المعلومات على الشاشة. استخدام "2 hr. ago" بدلاً من "2 hours ago" يوفر الأحرف لكل طابع زمني، مما يضيف قيمة عبر قيم متعددة.

تستخدم أقسام التعليقات الأسلوب القصير لإظهار وقت نشر التعليقات دون إرباك الواجهة. عرض "5 min. ago" بجانب تعليق أكثر إيجازًا من "5 minutes ago" مع الحفاظ على الوضوح.

تحتاج جداول البيانات التي تعرض الطوابع الزمنية في أعمدة إلى عرض متسق. تحافظ الاختصارات القصيرة مثل "hr." و"min." و"sec." على عرض الأعمدة قابلاً للإدارة. الوحدات الطويلة مثل "hours" و"minutes" و"seconds" توسع الأعمدة بشكل غير ضروري.

تستخدم لوحات الإشعارات الأسلوب القصير لأن المستخدمين الذين يتحققون من الإشعارات على دراية باختصارات الوقت. إشعار يعرض "1 hr. ago" يوازن بين الوضوح والاستخدام الفعال لمساحة العرض.

تستخدم تطبيقات البريد الإلكتروني الأسلوب القصير لإظهار عمر الرسالة. عرض "2 days ago" في قائمة الرسائل أوضح من "2d ago" ولكنه أكثر إيجازًا من "2 days ago" مكتوبة بالكامل.

function formatCommentTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "short",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInMinutes = Math.round(diffInMs / (1000 * 60));

  return formatter.format(diffInMinutes, "minute");
}

const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);

console.log(formatCommentTimestamp(fiveMinutesAgo, "en-US"));
// Output: "5 min. ago"

يحقق الأسلوب القصير توازنًا بين الوضوح والكفاءة. يتعرف معظم المستخدمين على الاختصارات القياسية دون ارتباك.

متى تستخدم النمط الضيق

يعمل النمط الضيق بشكل أفضل في السياقات شديدة القيود المساحية حيث كل حرف مهم ويكون المستخدمون على دراية عالية بتدوين الوقت.

يمكن للأدوات المضغوطة التي تعرض مقاييس فردية استخدام النمط الضيق عندما يكون حجم العرض ضئيلاً. أداة المؤقت التي تعرض "منذ 5د" بنص صغير تناسب أكثر من "منذ 5 دقائق".

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

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

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

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

function formatCompactTimestamp(date, locale) {
  const formatter = new Intl.RelativeTimeFormat(locale, {
    style: "narrow",
    numeric: "auto"
  });

  const now = new Date();
  const diffInMs = date - now;
  const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));

  return formatter.format(diffInHours, "hour");
}

const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);

console.log(formatCompactTimestamp(twoHoursAgo, "en-US"));
// Output: "2h ago"

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

دمج النمط مع خيار الأرقام

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

const autoLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "auto",
  style: "long"
});

console.log(autoLong.format(-1, "day"));
// Output: "yesterday"

console.log(autoLong.format(-2, "day"));
// Output: "2 days ago"

const autoShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "auto",
  style: "short"
});

console.log(autoShort.format(-1, "day"));
// Output: "yesterday"

console.log(autoShort.format(-2, "day"));
// Output: "2 days ago"

عندما يكون numeric هو "auto" ويستخدم المنسق لغة طبيعية مثل "أمس"، فإن خيار style ليس له تأثير لأنه لا توجد مخرجات رقمية لتنسيقها. ينتج المنسق نفس المخرجات بغض النظر عن النمط.

عندما ينتج المنسق مخرجات رقمية، يتحكم خيار style في مستوى التفصيل.

const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "long"
});

console.log(alwaysLong.format(-1, "day"));
// Output: "1 day ago"

const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "short"
});

console.log(alwaysShort.format(-1, "day"));
// Output: "1 day ago"

const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "narrow"
});

console.log(alwaysNarrow.format(-1, "day"));
// Output: "1 day ago"

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

const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "long"
});

const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "short"
});

const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
  numeric: "always",
  style: "narrow"
});

console.log("Long:   " + alwaysLong.format(-2, "hour"));
console.log("Short:  " + alwaysShort.format(-2, "hour"));
console.log("Narrow: " + alwaysNarrow.format(-2, "hour"));

// Output:
// Long:   2 hours ago
// Short:  2 hr. ago
// Narrow: 2h ago

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

ما يجب تذكره

يتحكم خيار style في كيفية ظهور الأوقات النسبية عند التنسيق باستخدام Intl.RelativeTimeFormat. قم بتعيينه إلى "long" للكلمات المهجاة مثل "منذ ساعتين"، أو "short" للاختصارات القياسية مثل "منذ 2 س."، أو "narrow" للأشكال المختصرة مثل "منذ 2س". يكون الخيار افتراضيًا "long" إذا تم إغفاله.

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

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