كيف تتحكم في إظهار فواصل الآلاف؟

مقدمة

عند تنسيق الرقم 123456، قد ترى "123,456" مع فاصلة تفصل الآلاف، أو "123456" بدون أي فاصل. الحرف الذي يفصل مجموعات الأرقام يسمى فاصل التجميع، والمعروف عادة باسم فاصل الآلاف في المناطق الناطقة بالإنجليزية.

تتطلب السياقات المختلفة تنسيقات مختلفة. عادة ما تُظهر التقارير المالية فواصل التجميع لتسهيل قراءة الأرقام الكبيرة. عادة ما تحذف الشاشات التقنية مثل الأرقام التسلسلية ورموز المنتجات وأرقام المعرفات هذه الفواصل لمنع الالتباس. يتحكم خيار useGrouping في Intl.NumberFormat في ظهور هذه الفواصل في المخرجات المنسقة.

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

تعطيل فواصل التجميع باستخدام useGrouping false

اضبط useGrouping على false لإزالة جميع فواصل التجميع من الأرقام المنسقة.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

لا يحتوي المخرج المنسق على فواصل أو أحرف تجميع أخرى، بغض النظر عن حجم الرقم. يبقى الفاصل العشري لأن useGrouping يؤثر فقط على تجميع الأرقام، وليس على التنسيق العشري.

ينطبق هذا على جميع أنماط الأرقام، بما في ذلك العملات والوحدات.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

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

تمكين فواصل التجميع باستخدام useGrouping true

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

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

يُدرج المُنسِّق فواصل كل ثلاثة أرقام، متبعاً الاصطلاحات الإنجليزية. وهذا يجعل الأرقام الكبيرة أسهل في المسح البصري.

نظراً لأن true هو الافتراضي، فإن هذين المُنسِّقين متكافئان.

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

يتضمن كلا المُنسِّقين فواصل التجميع في مخرجاتهما.

فهم كيفية اختلاف التجميع عبر اللغات المحلية

تستخدم اللغات المحلية المختلفة أحرفاً مختلفة للتجميع وتتبع أنماط تجميع مختلفة. يتحكم الخيار useGrouping في حدوث التجميع من عدمه، بينما تحدد اللغة المحلية الحرف الذي يظهر ومكان ظهوره.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

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

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

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

يظهر فاصل التجميع بعد ثلاثة أرقام من اليمين، ثم بعد كل رقمين، مما ينتج 12,34,567 بدلاً من 1,234,567.

عند تعطيل التجميع باستخدام useGrouping: false، تختفي هذه الاختلافات الخاصة باللغة المحلية لأنه لا تظهر أي فواصل على الإطلاق.

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

استخدام قيم السلاسل النصية للتحكم المتقدم في التجميع

يقبل الخيار useGrouping قيم سلاسل نصية توفر تحكماً أدق في وقت ظهور فواصل التجميع. هذه القيم جزء من مواصفات Intl.NumberFormat V3 ومدعومة في المتصفحات الحديثة.

القيمة "always" مكافئة لـ true وتعرض دائماً فواصل التجميع.

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

تتبع القيمة "auto" تفضيلات اللغة المحلية للتجميع. تفضل معظم اللغات المحلية إظهار فواصل التجميع، مما يجعل "auto" مشابهاً لـ "always" في الممارسة العملية. هذه هي القيمة الافتراضية عندما لا يكون notation هو "compact".

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

تُظهر القيمة "min2" فواصل التجميع فقط عندما يكون هناك رقمان على الأقل في المجموعة الأولى. بالنسبة للأرقام المكونة من أربعة أرقام، هذا يعني عدم ظهور فاصل.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

الرقم 1234 يحتوي على رقم واحد فقط في المجموعة الأولى (1)، لذلك لا يظهر فاصل. الرقم 12345 يحتوي على رقمين في المجموعة الأولى (12)، لذلك يظهر الفاصل.

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

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

تحترم القيمة "auto" تفضيلات اللغة هذه، بينما "always" تتجاوزها.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

اختر متى تعطل فواصل التجميع

عطّل فواصل التجميع في السياقات التي يمثل فيها الرقم رمزًا أو معرفًا أو قيمة تقنية بدلاً من كمية.

يجب ألا تحتوي الأرقام التسلسلية ورموز المنتجات على فواصل تجميع.

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

يمنع هذا الالتباس حول ما إذا كان الفاصل جزءًا من القيمة الفعلية. قد يتساءل المستخدم الذي يرى 1,234,567,890 عما إذا كانت الفواصل ذات معنى أو ما إذا كان يجب عليه كتابتها عند إدخال الرقم في مكان آخر.

تستفيد الرموز البريدية وأرقام الهواتف (عند تنسيقها كأرقام عادية) والمعرفات الأخرى ذات التنسيق الثابت من تعطيل التجميع.

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

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

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

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

اختر متى تفعّل فواصل التجميع

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

المبالغ المالية أسهل في المسح السريع مع فواصل التجميع.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

تساعد الفواصل المستخدمين على التمييز بسرعة بين $1,234,567 و$123,456 بنظرة واحدة.

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

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

القياسات الكبيرة تصبح أكثر قابلية للقراءة مع التجميع.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

هذه المسافة (المسافة التقريبية إلى القمر) أسهل في القراءة كـ 384,400 من 384400.

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

استخدم min2 لعرض أنظف للأرقام المكونة من أربعة خانات

توفر قيمة "min2" مظهراً أنظف للأرقام التي قد تكون من أربع أو خمس خانات. أرقام السنوات، على سبيل المثال، عادةً ما تبدو أفضل بدون فواصل.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

معظم القراء يجدون 2025 أكثر طبيعية من 2,025 عند الإشارة إلى سنة. يوفر إعداد "min2" هذا السلوك تلقائياً.

الأسعار في نطاقات معينة تستفيد أيضاً من هذا النهج.

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

يفضل بعض تجار التجزئة عرض أسعار مثل $1299 بدون فاصلة لجعلها تبدو أقل تكلفة نفسياً. بمجرد أن تتجاوز الأسعار أربع خانات، يظهر الفاصل.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

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

فهم كيفية تأثير التدوين المضغوط على التجميع

عند استخدام التدوين المضغوط، يتغير السلوك الافتراضي لـ useGrouping إلى "min2" بدلاً من "auto". يمنع هذا الفواصل غير الضرورية في التنسيقات المضغوطة.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

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

التحقق من إعداد التجميع النشط

تعرض الطريقة resolvedOptions() قيمة useGrouping التي يستخدمها المنسق فعلياً.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

formatter.resolvedOptions().useGrouping;
// "auto"

على الرغم من إنشاء المنسق دون تعيين useGrouping بشكل صريح، تُظهر الخيارات المحلولة القيمة الافتراضية "auto".

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

compactFormatter.resolvedOptions().useGrouping;
// "min2"

يستخدم منسق التدوين المضغوط افتراضياً "min2" بدلاً من "auto"، كما هو موضح في الخيارات المحلولة.

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