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

المشكلة

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

الحل

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

الخطوات

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".