كيفية الاختيار بين 1K و1 ألف في التنسيق المضغوط

مقدمة

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

توفر Intl.NumberFormat في JavaScript خيار compactDisplay للتحكم في هذا الاختيار. يمكنك الاختيار بين العرض القصير، الذي يستخدم اختصارات مثل K وM وB، أو العرض الطويل، الذي يكتب الحجم كـ ألف ومليون ومليار. يمنحك هذا الخيار تحكمًا دقيقًا في كيفية ظهور الأرقام المضغوطة للمستخدمين.

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

يعمل خيار compactDisplay فقط عند تعيين notation إلى "compact". يقبل قيمتين: "short" و"long". تنتج القيمة short مخرجات مختصرة مثل 1.5K، بينما تنتج القيمة long مخرجات مكتوبة مثل 1.5 ألف.

const shortFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "short"
});

console.log(shortFormatter.format(1500));
// Output: "1.5K"

const longFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(longFormatter.format(1500));
// Output: "1.5 thousand"

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

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

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

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "short"
});

console.log(formatter.format(1500));
// Output: "1.5K"

console.log(formatter.format(2400000));
// Output: "2.4M"

console.log(formatter.format(7800000000));
// Output: "7.8B"

console.log(formatter.format(5600000000000));
// Output: "5.6T"

يختار المنسق تلقائيًا الاختصار المناسب بناءً على حجم الرقم. تستخدم الآلاف K، والملايين M، والمليارات B، والتريليونات T.

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

تنسيق الأرقام بعرض مدمج طويل

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

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(formatter.format(1500));
// Output: "1.5 thousand"

console.log(formatter.format(2400000));
// Output: "2.4 million"

console.log(formatter.format(7800000000));
// Output: "7.8 billion"

console.log(formatter.format(5600000000000));
// Output: "5.6 trillion"

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

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

مقارنة العرض المدمج المختصر والطويل

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

const shortFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "short"
});

const longFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

const numbers = [1500, 45000, 2400000, 950000000];

numbers.forEach(num => {
  console.log(`${num}:`);
  console.log(`  Short: ${shortFormatter.format(num)}`);
  console.log(`  Long:  ${longFormatter.format(num)}`);
});

// Output:
// 1500:
//   Short: 1.5K
//   Long:  1.5 thousand
// 45000:
//   Short: 45K
//   Long:  45 thousand
// 2400000:
//   Short: 2.4M
//   Long:  2.4 million
// 950000000:
//   Short: 950M
//   Long:  950 million

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

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

كيف يختلف العرض المدمج عبر اللغات

يتكيف كل من العرض المدمج المختصر والطويل مع اللغة المحلية التي تحددها. تستخدم اللغات المختلفة اختصارات وكلمات حجم مختلفة.

const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    notation: "compact",
    compactDisplay: "short"
  });

  const longFormatter = new Intl.NumberFormat(locale, {
    notation: "compact",
    compactDisplay: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(2400000)}`);
  console.log(`  Long:  ${longFormatter.format(2400000)}`);
});

// Output:
// en-US:
//   Short: 2.4M
//   Long:  2.4 million
// fr-FR:
//   Short: 2,4 M
//   Long:  2,4 millions
// de-DE:
//   Short: 2,4 Mio.
//   Long:  2,4 Millionen
// es-ES:
//   Short: 2,4 M
//   Long:  2,4 millones

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

يتعامل المنسق مع هذه الاختلافات تلقائيًا بناءً على اللغة المحلية. لا تحتاج إلى الاحتفاظ بمنطق تنسيق منفصل لكل لغة.

غالبًا ما تستخدم اللغات الآسيوية أنظمة تجميع أرقام مختلفة تمامًا.

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact",
  compactDisplay: "short"
});

console.log(jaFormatter.format(15000000));
// Output: "1500万"

const zhFormatter = new Intl.NumberFormat("zh-CN", {
  notation: "compact",
  compactDisplay: "short"
});

console.log(zhFormatter.format(15000000));
// Output: "1500万"

تقوم اليابانية والصينية بالتجميع حسب عشرة آلاف بدلاً من ألف. يمثل الحرف 万 عشرة آلاف، لذا يصبح 15,000,000 هو 1500万 بدلاً من 15M. تتعامل واجهة Intl API مع هذه الاختلافات الأساسية في أنظمة الأرقام تلقائيًا.

متى تستخدم العرض المضغوط القصير

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

تستفيد جداول البيانات التي تعرض أرقامًا متعددة من العرض الموحد. يحافظ استخدام 1.5K و2.4M و7.8B على محاذاة الأعمدة ويمنع الالتفاف. يساعد تنسيق الاختصار المتسق المستخدمين على مسح أعمدة الأرقام بسرعة.

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

تتطلب محاور الرسوم البيانية والتسميات نصًا بسيطًا لتجنب التداخل أو الازدحام. يحافظ استخدام 1.5M بدلاً من 1.5 مليون على تسميات المحاور قابلة للقراءة دون تدويرها أو اقتطاعها.

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

متى تستخدم العرض المضغوط الطويل

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

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

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

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

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

دمج العرض المضغوط مع خيارات التنسيق الأخرى

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

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long",
  maximumFractionDigits: 2
});

console.log(formatter.format(1234567));
// Output: "1.23 million"

console.log(formatter.format(9876543));
// Output: "9.88 million"

يتحكم خيار maximumFractionDigits في دقة الأرقام العشرية بينما يتحكم compactDisplay في تنسيق الحجم. تعمل هذه الخيارات معًا لإنتاج التنسيق الدقيق الذي تحتاجه.

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

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation: "compact",
  compactDisplay: "long"
});

console.log(formatter.format(2400000));
// Output: "$2.4 million"

console.log(formatter.format(750000));
// Output: "$750 thousand"

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

يعمل العرض المضغوط أيضًا مع عرض الإشارة لإظهار التغييرات أو الفروقات.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long",
  signDisplay: "always"
});

console.log(formatter.format(1500000));
// Output: "+1.5 million"

console.log(formatter.format(-850000));
// Output: "-850 thousand"

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

ما يجب تذكره

يتحكم خيار compactDisplay في ما إذا كان التدوين المضغوط يستخدم الاختصارات أو الكلمات المكتوبة. اضبطه على "short" للحصول على مخرجات مختصرة مثل 1.5K، أو "long" للحصول على مخرجات مكتوبة مثل 1.5 ألف. يتم تعيين الخيار افتراضيًا على "short" إذا تم حذفه.

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

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