كيف تعرض أو تخفي علامة الطرح للأرقام السالبة؟

مقدمة

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

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

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

بشكل افتراضي، يعرض 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" مع هذا الخيار. يميز JavaScript بين الصفر الموجب والصفر السالب، والذي يمكن أن يحدث في عمليات رياضية معينة.

استخدم 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' عندما يكون الاتجاه مهمًا لجميع القيم وتريد التأكيد على كل من الزيادات والانخفاضات. غالبًا ما تستخدم تغييرات درجة الحرارة وفروقات الارتفاع وتقارير الأداء المالي هذا التنسيق لجعل القيم الموجبة والسالبة واضحة بشكل متساوٍ.

// Standard pricing: use auto (default)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// Absolute price difference: use never
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// Price change: use exceptZero
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// Temperature change: use always
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

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