كيفية تنسيق الأرقام كـ 1K، 1M، 1B

مقدمة

تشغل الأرقام الكبيرة مساحة كبيرة ويصعب مسحها بسرعة. يتطلب رقم مثل 1,500,000 سبعة أرقام بالإضافة إلى التنسيق، بينما ينقل 1.5M نفس الحجم في ثلاثة أحرف. هذا التمثيل المضغوط شائع في عدد المتابعين على وسائل التواصل الاجتماعي، وعدد مشاهدات الفيديو، ومقاييس لوحات المعلومات، وأحجام الملفات.

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

لماذا تحتاج الأرقام الكبيرة إلى تنسيق مضغوط

عند عرض أرقام كبيرة في واجهات المستخدم، تظهر مشكلتان. أولاً، تستهلك الأرقام مساحة أفقية. يتطلب عداد يعرض 1,234,567 مشاهدة مساحة أكبر من عداد يعرض 1.2M مشاهدة. ثانيًا، يعالج المستخدمون الأرقام المضغوطة بشكل أسرع. يتعرف الدماغ البشري على 1.5M كمليون ونصف بسرعة أكبر من تحليل 1,500,000.

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

تتطلب السياقات المختلفة مستويات مختلفة من الدقة. نادرًا ما يحتاج عدد متابعي وسائل التواصل الاجتماعي إلى أرقام دقيقة. يوفر عرض 1.2M متابع بدلاً من 1,234,567 معلومات كافية. قد تحتاج لوحة معلومات مالية إلى مزيد من الدقة، حيث تعرض 1.23M بدلاً من 1.2M. تتيح لك واجهة برمجة التطبيقات Intl التحكم في هذه الدقة مع الحفاظ على التنسيق المضغوط.

استخدام الترميز المضغوط في JavaScript

يتحكم الخيار notation في Intl.NumberFormat في كيفية تمثيل الأرقام. يؤدي تعيينه إلى "compact" إلى تمكين التنسيق المضغوط.

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

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

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

console.log(formatter.format(1500000000));
// Output: "1.5B"

يختار المنسق تلقائيًا مؤشر الحجم المناسب بناءً على حجم الرقم. تصبح الآلاف K، وتصبح الملايين M، وتصبح المليارات B. كما يقوم المنسق بتقليل الرقم إلى رقم قابل للقراءة، حيث يعرض 1.5K بدلاً من 1.5 ألف.

لا تحتاج إلى كتابة منطق لتحديد متى تستخدم K أو M أو B. تتعامل واجهة برمجة التطبيقات Intl مع هذا القرار بناءً على حجم الرقم.

كيف يقوم الترميز المضغوط بتنسيق الأحجام المختلفة

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

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

console.log(formatter.format(500));
// Output: "500"

console.log(formatter.format(1000));
// Output: "1K"

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

console.log(formatter.format(999000));
// Output: "999K"

console.log(formatter.format(1000000));
// Output: "1M"

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

console.log(formatter.format(1000000000));
// Output: "1B"

console.log(formatter.format(1000000000000));
// Output: "1T"

تُعرض الأرقام الأقل من ألف دون ضغط. بمجرد أن يصل الرقم إلى ألف، يتحول إلى ترميز K. يستمر نفس النمط للملايين والمليارات والتريليونات.

يقوم المنسق بتقريب الأرقام لتناسب التمثيل المضغوط. يصبح رقم مثل 1,234,567 هو 1.2M افتراضيًا. سيغطي الدرس التالي كيفية التحكم في عدد المنازل العشرية المعروضة في الترميز المضغوط.

الاختيار بين العرض القصير والطويل

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

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

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

console.log(shortFormatter.format(1500000));
// Output: "1.5M"

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

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

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

يتحكم الخيار compactDisplay في هذا السلوك. يقبل قيمتين: "short" و"long". إذا حذفت هذا الخيار، فسيتم تعيينه افتراضيًا إلى "short".

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

كيفية عمل الترميز المدمج في اللغات المختلفة

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

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

console.log(enFormatter.format(1500000));
// Output: "1.5M"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 M"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."

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

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

تستخدم الفرنسية M مع مسافة قبلها. تستخدم الألمانية Mio. كاختصار لكلمة Million. تستخدم اليابانية نظام أرقام مختلفًا تمامًا مع 万 الذي يمثل عشرة آلاف.

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

يتكيف العرض الطويل أيضًا مع كل لغة.

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

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

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 million"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"

تستخدم الألمانية Millionen لصيغة الجمع من million. تستخدم الفرنسية million بدون s. تتعامل واجهة Intl API مع هذه الاختلافات اللغوية نيابة عنك.

عندما لا يتم ضغط الأرقام الصغيرة

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

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

console.log(formatter.format(10));
// Output: "10"

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(999));
// Output: "999"

console.log(formatter.format(1000));
// Output: "1K"

يمنع هذا السلوك التنسيق المحرج للأرقام الصغيرة. إظهار 500 كـ 500 أوضح من إظهاره كـ 0.5K. يطبق المنسق الترميز المدمج فقط عندما يحسن قابلية القراءة.

العتبة ليست دائمًا ألف. تستخدم بعض اللغات، مثل اليابانية، أنظمة تجميع أرقام مختلفة. تجمع اليابانية بعشرة آلاف، لذا قد يبدأ الترميز المدمج عند عتبة مختلفة.

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

console.log(jaFormatter.format(9999));
// Output: "9999"

console.log(jaFormatter.format(10000));
// Output: "1万"

تتعامل واجهة Intl API مع هذه العتبات الخاصة بالإعدادات المحلية تلقائيًا.

دمج الترميز المدمج مع خيارات التنسيق الأخرى

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

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

console.log(formatter.format(1234567));
// Output: "1.2M"

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

console.log(preciseFormatter.format(1234567));
// Output: "1.23M"

const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 0
});

console.log(noDecimalsFormatter.format(1234567));
// Output: "1M"

يتحكم خيار maximumFractionDigits في عدد المنازل العشرية التي تظهر بعد الرقم الصحيح. تعيينه إلى 0 يزيل جميع المنازل العشرية، مما يجعل الرقم أكثر إيجازاً.

يمكنك أيضاً دمج الترميز المدمج مع خيارات الحد الأدنى من الأرقام لضمان تنسيق متسق عبر نطاق من الأرقام.

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

console.log(formatter.format(1000));
// Output: "1.0K"

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

console.log(formatter.format(2000));
// Output: "2.0K"

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

متى تستخدم الترميز المدمج

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

لا تستخدم الترميز المدمج عندما تكون الأرقام الدقيقة مهمة. المعاملات المالية، والقياسات العلمية، والوثائق القانونية تتطلب دقة كاملة. يجب أن يظهر رصيد البنك 1,234.56$، وليس 1.2 ألف$. يجب أن تظهر الفاتورة 1,500.00$، وليس 1.5 ألف$.

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

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