كيفية إظهار علامة الزائد للأرقام الموجبة

مقدمة

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

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

كيفية عرض الأرقام افتراضياً

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

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

console.log(formatter.format(42));
// Output: "42"

console.log(formatter.format(-42));
// Output: "-42"

console.log(formatter.format(0));
// Output: "0"

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

فكر في عرض التغيرات اليومية في درجة الحرارة. بدون علامات صريحة، يرى المستخدمون أرقاماً مثل 3 و5، والتي قد تعني درجات حرارة مطلقة بدلاً من تغييرات. مع علامات صريحة مثل +3 و+5، يصبح المعنى واضحاً.

استخدام signDisplay لإظهار علامات الزائد

يتحكم خيار signDisplay في Intl.NumberFormat في متى يتم عرض العلامات للأرقام. اضبط signDisplay على "always" لإظهار علامتي الزائد والناقص.

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

console.log(formatter.format(42));
// Output: "+42"

console.log(formatter.format(-42));
// Output: "-42"

console.log(formatter.format(0));
// Output: "+0"

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

فهم جميع قيم signDisplay

يقبل خيار signDisplay خمس قيم. تخدم كل قيمة غرضاً محدداً اعتماداً على كيفية التعامل مع العلامات للقيم الموجبة والسالبة والصفر.

قيمة auto للسلوك الافتراضي للعلامة

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

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

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(0));
// Output: "0"

استخدم "auto" عند عرض القيم المطلقة حيث يعني غياب العلامة قيمة موجبة. هذا هو التنسيق القياسي للأسعار والعدّادات والقياسات.

قيمة always لإظهار جميع العلامات

تعرض قيمة "always" العلامات لجميع الأرقام، بما في ذلك الموجبة والسالبة والصفر.

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

console.log(formatter.format(100));
// Output: "+100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(0));
// Output: "+0"

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

قيمة exceptZero لإخفاء علامة الصفر

تعرض قيمة "exceptZero" العلامات للأرقام الموجبة والسالبة ولكنها تحذف العلامة للصفر.

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

console.log(formatter.format(100));
// Output: "+100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(0));
// Output: "0"

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

قيمة negative لإظهار علامات الناقص فقط

تعرض قيمة "negative" علامة الناقص للأرقام السالبة فقط، باستثناء الصفر السالب. تُعرض الأرقام الموجبة والصفر بدون علامات.

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

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(-0));
// Output: "0"

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

قيمة never لإخفاء جميع العلامات

تعرض قيمة "never" الأرقام بدون أي علامات، حتى للأرقام السالبة.

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

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(-100));
// Output: "100"

console.log(formatter.format(0));
// Output: "0"

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

متى تستخدم كل خيار من خيارات signDisplay

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

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

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

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

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

استخدم "never" للمقادير المطلقة حيث يتم توصيل الاتجاه بشكل منفصل. عندما تشير الألوان أو الأيقونات بالفعل إلى القيم الموجبة أو السالبة، فإن إزالة العلامة تمنع المعلومات الزائدة.

إظهار علامات الزائد مع العملة

يعمل تنسيق العملة مع signDisplay لإظهار تغييرات الحساب ومبالغ المعاملات مع علامات صريحة.

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

console.log(formatter.format(250.50));
// Output: "+$250.50"

console.log(formatter.format(-75.25));
// Output: "-$75.25"

console.log(formatter.format(0));
// Output: "+$0.00"

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

يمكنك دمج تنسيق العملة مع exceptZero للتمييز بين عدم وجود تغيير والمعاملات الموجبة أو السالبة.

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

console.log(formatter.format(250.50));
// Output: "+$250.50"

console.log(formatter.format(-75.25));
// Output: "-$75.25"

console.log(formatter.format(0));
// Output: "$0.00"

يظهر الصفر الآن بدون علامة، مما يجعله مميزاً بصرياً عن المكاسب أو الخسائر الفعلية.

إظهار علامات الزائد مع النسب المئوية

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

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(-0.0341));
// Output: "-3.4%"

console.log(formatter.format(0));
// Output: "+0.0%"

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

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

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "exceptZero",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(0));
// Output: "0.0%"

يشير الصفر بدون علامة بوضوح إلى عدم حدوث تغيير.

دمج signDisplay مع المنازل العشرية

يعمل خيار signDisplay مع جميع خيارات تنسيق الأرقام الأخرى. يمكنك التحكم في الأماكن العشرية والتقريب وفواصل الآلاف مع التحكم أيضاً في عرض العلامة.

const formatter = new Intl.NumberFormat("en-US", {
  signDisplay: "always",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(1234.5));
// Output: "+1,234.50"

console.log(formatter.format(-1234.5));
// Output: "-1,234.50"

يضمن هذا المزيج منازل عشرية متسقة مع إظهار علامات صريحة للقيم الموجبة والسالبة على حد سواء.

يمكنك أيضاً دمج signDisplay مع الترميز المضغوط لعرض التغييرات الكبيرة.

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

console.log(formatter.format(1500000));
// Output: "+1.5M"

console.log(formatter.format(-850000));
// Output: "-850K"

يجعل التنسيق المضغوط الأرقام الكبيرة قابلة للقراءة بينما تُظهر العلامة اتجاه التغيير.

ما يجب تذكره

يتحكم خيار signDisplay في Intl.NumberFormat في موعد ظهور علامتي الزائد والناقص في الأرقام المنسقة. استخدم "always" لإظهار علامات صريحة لجميع الأرقام، و"exceptZero" لإخفاء العلامة على الصفر، و"auto" للسلوك الافتراضي، و"negative" لإظهار علامات الناقص فقط، و"never" لإخفاء جميع العلامات.

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