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

مقدمة

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

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

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

كيفية عرض النسب المئوية افتراضياً

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

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

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

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

console.log(formatter.format(0.0325));
// Output: "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));
// Output: "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%"

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

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

في بعض الأحيان تريد إظهار الأرقام العشرية فقط عندما تقدم معلومات ذات معنى. قم بتعيين 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
});

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