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

مقدمة

تتطلب السياقات المختلفة مستويات مختلفة من الدقة عند عرض النسب المئوية. معدل الفائدة البالغ 3.25% يحتاج إلى منزلتين عشريتين بالضبط للتعبير عن المعدل الدقيق. معدل التحويل المعروض على لوحة المعلومات يعمل بشكل أفضل كـ 85.5% مع منزلة عشرية واحدة لسهولة القراءة. نسبة الإكمال تعمل بشكل جيد كـ 100% بدون أي منازل عشرية على الإطلاق.

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

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

كيف تظهر النسب المئوية بشكل افتراضي

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

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

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

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

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

تظهر جميع النسب المئوية كأعداد كاملة بغض النظر عن دقة قيمة الإدخال. يقوم المنسق بتقريب 0.8547 إلى 85% و 0.8234 إلى 82%، متجاهلاً معلومات الكسور العشرية.

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

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

const conversionRate = 0.8547;
console.log(formatter.format(conversionRate));
// الناتج: "85%"

إن عرض معدل التحويل كـ 85% عندما تكون القيمة الفعلية 85.47% يخفي دقة مهمة تؤثر على قرارات الأعمال والتحليل.

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

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

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

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

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

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

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

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

التنسيق بمنزلة عشرية واحدة

قم بتعيين كلا الخيارين إلى 1 للحصول على منزلة عشرية واحدة بالضبط.

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

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

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

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

يقوم المنسق بتقريب 0.8547 إلى 85.5% ويعرض 0.85 كـ 85.0% مع صفر في النهاية. يعمل هذا التنسيق بشكل جيد لعروض لوحات المعلومات حيث توفر منزلة عشرية واحدة دقة كافية دون إرهاق المستخدمين بالأرقام.

التنسيق بثلاث منازل عشرية أو أكثر

تتطلب التطبيقات العلمية أو المالية أحيانًا أكثر من منزلتين عشريتين. قم بتعيين كلا الخيارين إلى 3 أو أعلى للحصول على دقة متزايدة.

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

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

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

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

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

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

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

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

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

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

يعرض المنسق ما يصل إلى منزلتين عشريتين ولكنه يزيل الأصفار الزائدة. تظهر القيمة 0.8547 كـ 85.47% مع كلتا المنزلتين العشريتين، بينما تظهر 0.85 كـ 85% بدون أصفار غير ضرورية.

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

يمكنك تعيين minimumFractionDigits إلى قيمة أقل من maximumFractionDigits للتحكم في عدد الأصفار الزائدة التي تظهر.

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

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

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

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

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

تنسيق اللغة المحلية لفواصل النسب المئوية العشرية

تستخدم اللغات المحلية المختلفة أحرفاً مختلفة كفواصل عشرية. تستخدم واجهة برمجة التطبيقات Intl.NumberFormat تلقائياً الفاصل الصحيح لكل لغة محلية.

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

const deFormatter = new Intl.NumberFormat("de-DE", {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

const rate = 0.8547;

console.log(usFormatter.format(rate));
// Output: "85.47%"

console.log(deFormatter.format(rate));
// Output: "85,47 %"

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

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

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

const arFormatter = new Intl.NumberFormat("ar-EG", {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

const rate = 0.8547;

console.log(frFormatter.format(rate));
// Output: "85,47 %"

console.log(arFormatter.format(rate));
// Output: "٨٥٫٤٧٪"

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

متى تستخدم المنازل العشرية المحددة مقابل الحد الأقصى للمنازل العشرية

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

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

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

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

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

تنسيق النسب المئوية السالبة مع المنازل العشرية

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

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

console.log(formatter.format(-0.0325));
// Output: "-3.25%"

console.log(formatter.format(-0.1547));
// Output: "-15.47%"

تظهر علامة السالب قبل الرقم، وتُعرض المنازل العشرية وفقًا لخيارات التنسيق الخاصة بك. يعمل هذا لعرض التغييرات في النسبة المئوية، أو الانخفاضات، أو الخسائر.

إعادة استخدام المنسقات لتحسين الأداء

يتطلب إنشاء نسخة جديدة من Intl.NumberFormat عمل تهيئة. عندما تقوم بتنسيق العديد من النسب المئوية بنفس الخيارات، قم بإنشاء المنسق مرة واحدة وأعد استخدامه.

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

const rates = [0.8547, 0.0325, 0.9123, 0.0045];

rates.forEach(rate => {
  console.log(formatter.format(rate));
});
// Output:
// "85.47%"
// "3.25%"
// "91.23%"
// "0.45%"

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

استخدام اللغة المفضلة للمستخدم

بدلاً من تحديد لغة ثابتة في الكود، استخدم تفضيلات لغة متصفح المستخدم لتنسيق النسب المئوية بالتنسيق المتوقع. توفر خاصية navigator.language اللغة المفضلة للمستخدم.

const formatter = new Intl.NumberFormat(navigator.language, {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

const rate = 0.8547;
console.log(formatter.format(rate));
// Output varies by user's locale
// For en-US: "85.47%"
// For de-DE: "85,47 %"
// For fr-FR: "85,47 %"

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

const formatter = new Intl.NumberFormat(navigator.languages, {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

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