تنسيق الأرقام

المشكلة

الأرقام الكبيرة مثل 10000.5 تُكتب كـ 10.000,5 في ألمانيا و 10,000.5 في الولايات المتحدة. عرض الرقم باستخدام اصطلاح منطقة واحدة يخلق ارتباكًا للمستخدمين في المناطق الأخرى، الذين قد يسيئون تفسير القيمة بسبب فواصل العشرية وفواصل التجميع غير الصحيحة.

الحل

استخدم مكون تنسيق مخصص من react-intl، مثل FormattedNumber. يقرأ هذا المكون تلقائيًا اللغة الحالية من المزود الخاص به وينسق رقمًا بدائيًا إلى سلسلة نصية تستخدم فواصل العشرية وفواصل التجميع الصحيحة والخاصة باللغة المحلية.

الخطوات

1. إنشاء مكون عميل للأرقام

مثل مكونات react-intl الأخرى، يجب استخدام FormattedNumber داخل مكون عميل.

قم بإنشاء مكون جديد، app/components/ProductInfo.tsx، سيعرض رقمًا منسقًا.

// app/components/ProductInfo.tsx
'use client';

import { FormattedNumber } of 'react-intl';

type Props = {
  reviewCount: number;
  averageRating: number;
};

export default function ProductInfo({ reviewCount, averageRating }: Props) {
  return (
    <div>
      <h3>Product details</h3>
      <p>
        Total reviews:
        {/* Basic number formatting */}
        <FormattedNumber value={reviewCount} />
      </p>
      <p>
        Average rating:
        {/* Formatting with options */}
        <FormattedNumber
          value={averageRating}
          minimumFractionDigits={1}
          maximumFractionDigits={1}
        />
      </p>
    </div>
  );
}

2. تمرير خيارات التنسيق

يقبل مكون FormattedNumber خيارات للتحكم في الإخراج:

• value هو number المراد تنسيقه.
• minimumFractionDigits و maximumFractionDigits تُستخدم هنا لإجبار عرض منزلة عشرية واحدة (مثل 4.0).

3. استخدام المكون في صفحة

الآن، يمكنك استخدام هذا المكون في أي صفحة تعرض معلومات المنتج.

// app/[lang]/page.tsx
import ProductInfo from '@/app/components/ProductInfo';

export default function Home() {
  const product = {
    reviews: 1234567,
    rating: 4.0,
  };

  return (
    <div>
      <h1>Welcome</h1>
      <ProductInfo
        reviewCount={product.reviews}
        averageRating={product.rating}
      />
    </div>
  );
}

سيرى المستخدم الذي يزور /en "Total reviews: 1,234,567" و "Average rating: 4.0". وسيرى المستخدم الذي يزور /es "Total reviews: 1.234.567" و "Average rating: 4,0".