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

مقدمة

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

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

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

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

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

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

استخدام التدوين المضغوط في جافا سكريبت

يتحكم خيار 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. كاختصار لكلمة مليون. تستخدم اليابانية نظام أرقام مختلف تمامًا حيث يمثل الرمز 万 عشرة آلاف.

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

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

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 بدون حرف s. تتعامل واجهة برمجة التطبيقات Intl مع هذه الاختلافات اللغوية نيابة عنك.

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

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

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 مع هذه الحدود الخاصة باللغة تلقائيًا.

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

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

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.2M مشاهدة توفر معلومات كافية.

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

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

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