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

مقدمة

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

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

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

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

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

تكتب القيمة long الكلمات الكاملة مثل "منذ ساعتين". تستخدم القيمة short الاختصارات القياسية مثل "منذ 2 س تقريباً". تنتج القيمة narrow التمثيل الأكثر تكثيفاً مثل "منذ 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"

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

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"

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

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."

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

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

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"

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

تنسيق الوقت النسبي بالنمط الضيق

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

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"

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

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

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

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

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

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

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

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

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"

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

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

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

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

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

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

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

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

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 فيما إذا كنت تحصل على لغة طبيعية مثل "yesterday" أو مخرجات رقمية مثل "1 day ago". يتحكم خيار 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" للاختصارات القياسية مثل "منذ ساعتين"، أو "narrow" للأشكال المدمجة مثل "منذ 2س". يكون الخيار افتراضياً "long" إذا تم حذفه.

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

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