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

مقدمة

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

تتعامل واجهة برمجة التطبيقات Intl.NumberFormat في JavaScript مع هذه الاختلافات في التنسيق تلقائياً. من خلال تعيين خيار 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));
// Output: "75%"

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

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

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

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

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

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

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

// Calculating completion percentage
const completed = 75;
const total = 100;
const ratio = completed / total;

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

// Calculating growth rate
const oldValue = 1000;
const newValue = 1250;
const growth = (newValue - oldValue) / oldValue;

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

عندما تقسم المكتمل على الإجمالي، تحصل على 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%.

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