كيفية تنسيق الأرقام إلى منزلتين عشريتين في جافا سكريبت

مقدمة

تحتاج العديد من التطبيقات إلى عرض أرقام بعدد ثابت من المنازل العشرية. عادةً ما تظهر الأسعار بمنزلتين عشريتين مثل 19.99 دولار. غالبًا ما تُعرض النسب المئوية بشكل 45.50%. تستخدم القياسات منازل عشرية متسقة لسهولة القراءة مثل 3.14 متر.

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

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

استخدام toFixed() للتنسيق الأساسي

تقوم طريقة toFixed() بتحويل الرقم إلى سلسلة نصية بعدد محدد من المنازل العشرية. قم بتمرير عدد المنازل العشرية كوسيط.

const price = 19.9;
const formatted = price.toFixed(2);
console.log(formatted);
// الناتج: "19.90"

تعرض الطريقة دائمًا منزلتين عشريتين بالضبط. إذا كان الرقم يحتوي على منازل عشرية أقل، تقوم toFixed() بإضافة أصفار. إذا كان يحتوي على منازل عشرية أكثر، تقوم الطريقة بالتقريب إلى منزلتين.

const examples = [5, 5.5, 5.555, 5.999];

examples.forEach(num => {
  console.log(num.toFixed(2));
});
// الناتج:
// "5.00"
// "5.50"
// "5.56"
// "6.00"

تُرجع طريقة toFixed() سلسلة نصية، وليس رقمًا. هذا متعمد لأن الأصفار اللاحقة لها معنى للعرض ولكنها ستُفقد إذا تم إرجاعها كرقم.

مشكلة اللغة المحلية مع toFixed()

تستخدم طريقة toFixed() دائمًا النقطة كفاصل عشري، بغض النظر عن لغة المستخدم المحلية. تستخدم العديد من البلدان الفاصلة كفاصل عشري بدلاً من النقطة.

const price = 19.99;
console.log(price.toFixed(2));
// الناتج: "19.99" (تستخدم النقطة دائمًا)

بالنسبة للمستخدمين في ألمانيا وفرنسا وإسبانيا والعديد من البلدان الأخرى، يبدو هذا خاطئًا. يتوقعون رؤية "19,99" بدلاً من "19.99". لا يمكن لطريقة toFixed() إنتاج مخرجات مناسبة للغة المحلية.

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

استخدام Intl.NumberFormat للتنسيق المتوافق مع اللغات المحلية

تقوم واجهة برمجة التطبيقات Intl.NumberFormat بتنسيق الأرقام وفقًا لاتفاقيات اللغة المحلية. قم بإنشاء منسق بلغة محلية وخيارات، ثم استدعاء طريقة format() الخاصة به مع رقم.

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

const price = 19.99;
console.log(formatter.format(price));
// Output: "19,99" (uses comma for German locale)

ينتج نفس المنسق مخرجات مختلفة للغات المحلية المختلفة.

const price = 19.99;

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

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

console.log(usFormatter.format(price));
// Output: "19.99"

console.log(deFormatter.format(price));
// Output: "19,99"

يتغير فاصل الأرقام العشرية تلقائيًا بناءً على اللغة المحلية.

التنسيق بالضبط بخانتين عشريتين

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

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

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

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

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

يتحكم خيار minimumFractionDigits في الأصفار اللاحقة. بدونه، لن تظهر الأصفار للأرقام ذات الخانات العشرية الأقل.

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

console.log(withoutMinimum.format(5));
// Output: "5"

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

console.log(withMinimum.format(5));
// Output: "5.00"

تعيين كلا الخيارين إلى نفس القيمة يضمن خانات عشرية متسقة عبر جميع الأرقام.

التنسيق بما يصل إلى خانتين عشريتين

في بعض الأحيان قد ترغب في إظهار الخانات العشرية فقط عند الحاجة، بحد أقصى خانتين. قم بتعيين maximumFractionDigits إلى 2 و minimumFractionDigits إلى 0 أو حذفه تمامًا.

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

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

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

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

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

القيمة الافتراضية لـ minimumFractionDigits هي 0 لتنسيق الأرقام العادية، لذلك يمكنك حذفها.

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

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

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

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

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

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

const prices = [19.99, 29.5, 99, 149.999];

prices.forEach(price => {
  console.log(formatter.format(price));
});
// Output:
// "19.99"
// "29.50"
// "99.00"
// "150.00"

هذا النمط أكثر كفاءة من إنشاء منسق جديد لكل رقم.

متى تستخدم كل نهج

استخدم منزلتين عشريتين بالضبط عند عرض الأسعار أو المبالغ النقدية أو أي قيمة حيث يكون للمنازل العشرية معنى دلالي. إظهار "$5.00" بدلاً من "$5" يشير إلى الدقة ويتوافق مع توقعات المستخدم للأسعار.

استخدم ما يصل إلى منزلتين عشريتين عند عرض الإحصائيات أو القياسات أو القيم المحسوبة حيث لا تضيف الأصفار اللاحقة أي معلومات. إظهار "5 متر" بدلاً من "5.00 متر" أنظف وأسهل للقراءة.

استخدم toFixed() فقط عندما تكون متأكدًا من أن جميع مستخدميك يستخدمون نفس اتفاقية فاصل العشرات، أو عندما لا تكون المخرجات موجهة للمستخدم. بالنسبة للتطبيقات المدولة، يفضل استخدام Intl.NumberFormat.

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

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

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

const price = 19.99;
console.log(formatter.format(price));
// Output varies by user's locale
// For en-US: "19.99"
// For de-DE: "19,99"
// For fr-FR: "19,99"

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

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

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