كيفية تنسيق النسب المئوية مع علامة النسبة المئوية

مقدمة

تظهر النسب المئوية في العديد من التطبيقات، من عرض تقدم الإنجاز إلى إظهار معدلات الفائدة ومبالغ الخصم. يعمل النهج البسيط مثل دمج رقم مع علامة النسبة المئوية في الحالات الأساسية، لكنه يفشل في مراعاة كيفية تنسيق النسب المئوية في اللغات والمناطق المختلفة. في اللغة التركية، تظهر علامة النسبة المئوية قبل الرقم مثل %50. في الفرنسية، تفصل مسافة بين الرقم وعلامة النسبة المئوية مثل 50 %. تستخدم اللغة العربية رمز نسبة مئوية خاص (٪) بدلاً من رمز النسبة المئوية القياسي %.

تتعامل واجهة برمجة التطبيقات Intl.NumberFormat في جافا سكريبت مع هذه الاختلافات في التنسيق تلقائيًا. من خلال ضبط خيار style على "percent"، يمكنك الحصول على نسب مئوية منسقة بشكل صحيح لأي لغة دون كتابة رمز خاص باللغة.

لماذا يختلف تنسيق النسبة المئوية حسب اللغة

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

تمتد اختلافات التنسيق إلى ما هو أبعد من مجرد وضع العلامة. تستخدم بعض اللغات أحرفًا مختلفة لرمز النسبة المئوية. تستخدم العربية ٪ (U+066A) بدلاً من علامة النسبة المئوية ASCII. يختلف أيضًا فاصل العشرات وفاصل الآلاف حسب اللغة، تمامًا كما هو الحال مع تنسيق الأرقام العادية.

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

تنسيق الأرقام كنسب مئوية

يتحكم خيار style في Intl.NumberFormat في ما إذا كان الرقم سيتم تنسيقه كرقم عادي، أو عملة، أو نسبة مئوية، أو وحدة. قم بتعيين style إلى "percent" لتنسيق الأرقام كنسب مئوية.

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

console.log(formatter.format(0.75));
// الناتج: "75%"

console.log(formatter.format(0.05));
// الناتج: "5%"

console.log(formatter.format(1.5));
// الناتج: "150%"

يقوم المنسق تلقائيًا بضرب قيمة الإدخال في 100 وإضافة علامة النسبة المئوية. هذا يعني أنك تمرر قيمًا كسرية إلى المنسق. قيمة 0.75 تصبح 75%. قيمة 1.5 تصبح 150%.

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

فهم قيم الإدخال الكسرية

يتوقع منسق النسبة المئوية إدخالًا كسريًا حيث تمثل 1.0 نسبة 100%. يتطابق هذا الاختيار التصميمي مع كيفية حساب النسب المئوية في الكود.

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

// حساب نسبة الإكمال
const completed = 75;
const total = 100;
const ratio = completed / total;

console.log(formatter.format(ratio));
// الناتج: "75%"

// حساب معدل النمو
const oldValue = 1000;
const newValue = 1250;
const growth = (newValue - oldValue) / oldValue;

console.log(formatter.format(growth));
// الناتج: "25%"

عندما تقسم completed على total، تحصل على 0.75. قم بتمرير هذا مباشرة إلى المنسق، وسيتم عرضه كـ 75%. عندما تحسب النمو كنسبة التغيير إلى القيمة الأصلية، تحصل على 0.25. يعرض المنسق هذا كـ 25%.

يمنع هذا النهج خطأً شائعًا حيث يقوم المطورون بالضرب في 100 قبل التنسيق، مما يؤدي إلى قيم مثل 7500% بدلاً من 75%. يتعامل المنسق مع عملية الضرب، لذلك تعمل مع التمثيل العشري الطبيعي في الكود الخاص بك.

التعامل مع القيم خارج نطاق 0-1

النسب المئوية ليست محصورة في القيم بين 0% و100%. القيم الأقل من الصفر تمثل نسبًا مئوية سالبة. القيم الأعلى من 1.0 تمثل نسبًا مئوية أكبر من 100%.

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

console.log(formatter.format(-0.15));
// Output: "-15%"

console.log(formatter.format(2.5));
// Output: "250%"

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

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

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

تنسيق النسب المئوية في لغات مختلفة

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

const enFormatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(enFormatter.format(0.5));
// Output: "50%"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  style: "percent"
});

console.log(frFormatter.format(0.5));
// Output: "50 %"

const trFormatter = new Intl.NumberFormat("tr-TR", {
  style: "percent"
});

console.log(trFormatter.format(0.5));
// Output: "%50"

const arFormatter = new Intl.NumberFormat("ar-SA", {
  style: "percent"
});

console.log(arFormatter.format(0.5));
// Output: "٪50"

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

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

التحكم في المنازل العشرية في النسب المئوية

بشكل افتراضي، تنسيق النسبة المئوية لا يُظهر أي منازل عشرية. قيمة مثل 0.755 يتم تنسيقها كـ 76% بعد التقريب. يمكنك التحكم في عدد المنازل العشرية باستخدام خيارات minimumFractionDigits و maximumFractionDigits.

const defaultFormatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(defaultFormatter.format(0.755));
// Output: "76%"

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

console.log(oneDecimalFormatter.format(0.755));
// Output: "75.5%"

const twoDecimalFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(twoDecimalFormatter.format(0.755));
// Output: "75.50%"

خيار minimumFractionDigits يضمن أن المنسق يعرض على الأقل ذلك العدد من المنازل العشرية، مضيفًا أصفارًا في النهاية إذا لزم الأمر. خيار maximumFractionDigits يحد من عدد المنازل العشرية، مع تقريب القيمة إذا لزم الأمر.

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

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

دمج النسب المئوية مع عرض الإشارة

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

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%"

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

تنسيق الصفر كنسبة مئوية

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

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

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

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

console.log(withSignFormatter.format(0.05));
// Output: "+5%"

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

استخدام signDisplay: "exceptZero" يُظهر العلامات للنسب المئوية الموجبة والسالبة ولكنه يحذف العلامة للصفر. هذا يجعل الصفر مميزًا بصريًا عندما يمثل حالة محايدة مثل عدم وجود تغيير.

متى تستخدم تنسيق النسبة المئوية

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

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

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

فهم دقة منسق النسبة المئوية

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

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

console.log(formatter.format(0.755));
// Output: "76%"

console.log(formatter.format(0.754));
// Output: "75%"

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

يتم تقريب القيم إلى أقرب نسبة مئوية كاملة. القيمة 0.755 تقرب إلى 76%. القيمة 0.754 تقرب إلى 75%. القيم الصغيرة جدًا مثل 0.001 تقرب إلى 0%.

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