كيف تُظهر أو تُخفي علامة السالب للأرقام السالبة؟

مقدمة

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

توفر واجهة برمجة التطبيقات Intl.NumberFormat في جافا سكريبت خيار signDisplay للتحكم في متى تظهر العلامات في الأرقام المنسقة. يمنحك هذا الخيار تحكمًا دقيقًا في رؤية العلامات للأرقام السالبة والموجبة والصفر.

كيف تقوم جافا سكريبت بتنسيق الأرقام السالبة افتراضيًا

افتراضيًا، تُظهر Intl.NumberFormat علامة ناقص للأرقام السالبة ولا تُظهر أي علامة للأرقام الموجبة.

const formatter = new Intl.NumberFormat('en-US');

formatter.format(-42);
// "-42"

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

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

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

التحكم في عرض العلامات باستخدام خيار signDisplay

يقبل خيار signDisplay خمس قيم تتحكم في متى تظهر العلامات:

• "auto": إظهار العلامات للأرقام السالبة فقط، بما في ذلك الصفر السالب (الافتراضي)
• "never": عدم إظهار العلامات أبدًا
• "always": إظهار العلامات دائمًا لكل من الأرقام الموجبة والسالبة
• "exceptZero": إظهار العلامات للأرقام الموجبة والسالبة، ولكن ليس للصفر
• "negative": إظهار العلامات للأرقام السالبة فقط، باستثناء الصفر السالب

قم بتمرير خيار signDisplay في كائن الخيارات عند إنشاء المنسق.

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

إخفاء علامة الناقص تمامًا

استخدم signDisplay: 'never' لإخفاء جميع العلامات وعرض القيم المطلقة فقط.

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

formatter.format(-100);
// "100"

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

formatter.format(-0);
// "0"

تقوم هذه الإعدادات بإزالة العلامة من جميع الأرقام، مما يجعل -100 و 100 تظهر بنفس الشكل. يتم تنسيق الصفر السالب كـ "0" بدون علامة.

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

const changes = [-15, 23, -8, 42];

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

changes.map(change => formatter.format(change));
// ["15", "23", "8", "42"]

إظهار علامة السالب للأرقام السالبة فقط

خيار signDisplay: 'auto' هو السلوك الافتراضي. يُظهر العلامات للأرقام السالبة وليس للأرقام الموجبة.

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

formatter.format(-100);
// "-100"

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

formatter.format(-0);
// "-0"

لاحظ أن الصفر السالب يظهر كـ "-0" مع هذا الخيار. تميز جافا سكريبت بين الصفر الموجب والصفر السالب، والذي يمكن أن يحدث في عمليات رياضية معينة.

استخدم signDisplay: 'negative' لإخفاء العلامة للصفر السالب مع الاحتفاظ بها للأرقام السالبة الأخرى.

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

formatter.format(-100);
// "-100"

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

formatter.format(-0);
// "0"

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

إظهار العلامات لجميع الأرقام باستثناء الصفر

استخدم signDisplay: 'exceptZero' لإظهار العلامات للأرقام الموجبة والسالبة، ولكن احذف العلامة عندما تكون القيمة صفراً بالضبط.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

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

formatter.format(-0);
// "0"

تظهر الأرقام الموجبة بعلامة زائد. قيم الصفر، سواء كانت موجبة أو سالبة، تظهر بدون أي علامة.

يعمل هذا الخيار بشكل جيد لعرض التغييرات أو الفروق حيث يعني الصفر عدم وجود تغيير. إظهار "+0" أو "-0" سيكون مربكاً، ولكن إظهار "0" يجعل المعنى واضحاً.

const deltas = [5, -3, 0, -0, 12];

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

deltas.map(delta => formatter.format(delta));
// ["+5", "-3", "0", "0", "+12"]

إظهار الإشارات لجميع الأرقام

استخدم signDisplay: 'always' لإظهار الإشارات لجميع الأرقام، بما في ذلك الأرقام الموجبة والصفر.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

formatter.format(0);
// "+0"

formatter.format(-0);
// "-0"

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

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

const temperatures = [-5, 0, 3, -2];

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
});

temperatures.map(temp => formatter.format(temp));
// ["-5°C", "+0°C", "+3°C", "-2°C"]

دمج عرض الإشارة مع تنسيق العملة

يعمل خيار signDisplay مع جميع أنماط التنسيق، بما في ذلك تنسيق العملة. عند دمجه مع currencySign: 'accounting'، يمكنك إنشاء تنسيقات تتبع اصطلاحات المحاسبة.

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

formatter.format(-1234.56);
// "($1,234.56)"

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

يمكنك دمج طريقة المحاسبة مع قيم signDisplay المختلفة.

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

always.format(1234.56);
// "+$1,234.56"

always.format(-1234.56);
// "($1,234.56)"

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

never.format(-1234.56);
// "$1,234.56"

مع signDisplay: 'always'، تظهر المبالغ الموجبة بعلامة زائد بينما تستخدم المبالغ السالبة الأقواس. مع signDisplay: 'never'، تظهر المبالغ الموجبة والسالبة بدون علامات أو أقواس.

متى تستخدم كل خيار من خيارات عرض الإشارة

اختر قيمة signDisplay بناءً على ما تمثله أرقامك وكيف سيفسرها المستخدمون.

استخدم signDisplay: 'auto' لتنسيق الأرقام القياسي حيث تحتاج الأرقام السالبة إلى تحديد واضح. هذا هو الإعداد الافتراضي ويعمل بشكل جيد للأسعار والعدادات والقياسات ومعظم عروض الأرقام للأغراض العامة.

استخدم signDisplay: 'never' عند عرض القيم المطلقة أو المقادير حيث لا يهم الاتجاه. يعمل هذا بشكل جيد لحسابات المسافة وهوامش الخطأ وقيم التغيير المطلقة وتصورات البيانات التي تظهر المقدار دون الاتجاه.

استخدم signDisplay: 'negative' عندما تريد تنسيق الأرقام السالبة القياسية ولكن تحتاج إلى تجنب عرض الصفر السالب. هذا يمنع عروض "-0" المربكة في السياقات الرياضية أو العلمية حيث لا يكون التمييز بين الصفر الموجب والسالب ذا معنى للمستخدمين.

استخدم signDisplay: 'exceptZero' عند عرض التغييرات أو الفروق حيث يعني الصفر عدم وجود تغيير. هذا يجعل المكاسب والخسائر واضحة مع تجنب عروض "+0" أو "-0" المربكة. تستفيد تغيرات درجة الحرارة وتحركات أسعار الأسهم ومقاييس الأداء من هذا الخيار.

استخدم signDisplay: 'always' عندما يكون الاتجاه مهمًا لجميع القيم وتريد التأكيد على كل من الزيادات والانخفاضات. غالبًا ما تستخدم تغيرات درجة الحرارة واختلافات الارتفاع وتقارير الأداء المالي هذا التنسيق لجعل القيم الموجبة والسالبة واضحة بنفس القدر.

// التسعير القياسي: استخدم auto (الافتراضي)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// فرق السعر المطلق: استخدم never
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// تغير السعر: استخدم exceptZero
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// تغير درجة الحرارة: استخدم always
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

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