كيفية الاختيار بين 1K و1 ألف في التنسيق المضغوط
استخدم خيار compactDisplay للتحكم في ما إذا كانت الأرقام المضغوطة تُعرض كاختصارات أو ككلمات مكتوبة بالكامل
مقدمة
عند تنسيق الأرقام الكبيرة باستخدام التدوين المختصر، يصبح الرقم 1500 بشكل افتراضي 1.5K. يعمل هذا التنسيق المختصر بشكل جيد في واجهات المستخدم ذات المساحة المحدودة مثل شاشات الهواتف المحمولة وبطاقات لوحات المعلومات. ومع ذلك، تستفيد بعض السياقات من كتابة الحجم بالكامل. يمكن عرض نفس الرقم على أنه 1.5 ألف بدلاً من 1.5K، مما يوفر الوضوح على حساب الإيجاز.
توفر واجهة Intl.NumberFormat في جافا سكريبت خيار compactDisplay للتحكم في هذا الاختيار. يمكنك الاختيار بين العرض القصير، الذي يستخدم اختصارات مثل K وM وB، أو العرض الطويل، الذي يكتب الحجم كألف ومليون ومليار. يمنحك هذا الخيار تحكمًا دقيقًا في كيفية ظهور الأرقام المختصرة للمستخدمين.
ما الذي يتحكم به خيار compactDisplay
يعمل خيار compactDisplay فقط عندما تقوم بتعيين notation إلى "compact". وهو يقبل قيمتين: "short" و"long". تنتج القيمة القصيرة مخرجات مختصرة مثل 1.5K، بينما تنتج القيمة الطويلة مخرجات مكتوبة بالكامل مثل 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 حرفًا واحدًا، بينما تأخذ كلمة thousand ثمانية أحرف بما في ذلك المسافة. يتضاعف هذا الفرق عند عرض العديد من الأرقام في جداول أو قوائم.
يوفر العرض الطويل سياقًا أكثر لكل رقم. يمكن للمستخدمين قراءة 2.4 million دون الحاجة إلى فك ترميز ما يمثله 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 لجعل millions في صيغة الجمع. تستخدم الألمانية 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 مع هذه الاختلافات الأساسية في أنظمة الأرقام تلقائيًا.
متى تستخدم العرض المختصر القصير
يعمل العرض المختصر القصير بشكل أفضل في السياقات المحدودة المساحة حيث كل حرف مهم. تحتوي واجهات الأجهزة المحمولة على مساحة أفقية محدودة، مما يجعل الأرقام المختصرة ضرورية لملاءمة المحتوى على الشاشة.
تستفيد جداول البيانات التي تعرض أرقامًا متعددة من العرض الموحد. استخدام 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 مع خيارات التنسيق الأخرى مثل المنازل العشرية والعملة وعرض الإشارة لإنشاء تنسيق الرقم الدقيق الذي تحتاجه تطبيقك.