كيفية تنسيق الأرقام للغات المختلفة في Next.js (موجه الصفحات) الإصدار 16

المشكلة

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

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

الحل

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

توفر مكتبة react-intl نهجين: مكون <FormattedNumber> للتنسيق التصريحي في JSX، وطريقة formatNumber من الخطاف useIntl للتنسيق الإجرائي. يعتمد كلاهما على واجهة برمجة التطبيقات Intl.NumberFormat في المتصفح ويطبقان تلقائيًا اللغة المحلية المكونة في IntlProvider الخاص بك. يحترم الإخراج المنسق الاتفاقيات الإقليمية لفواصل الآلاف ونقاط الأعداد العشرية وتجميع الأرقام.

الخطوات

1. إنشاء مكون ينسق الأرقام بشكل تصريحي

يستخدم مكون <FormattedNumber> واجهات برمجة التطبيقات formatNumber وIntl.NumberFormat ويقبل خاصية value إلى جانب خيارات تتوافق مع Intl.NumberFormatOptions.

import { FormattedNumber } from "react-intl";

export default function ProductPrice({ price }: { price: number }) {
  return (
    <div>
      <FormattedNumber value={price} />
    </div>
  );
}

بشكل افتراضي، يقوم <FormattedNumber> بعرض الرقم المنسق في React.Fragment. يقرأ المكون اللغة المحلية من أقرب IntlProvider ويطبق قواعد التنسيق المناسبة.

2. تنسيق الأرقام بخيارات محددة

قم بتمرير خيارات التنسيق للتحكم في كيفية ظهور الأرقام. تشمل الخيارات الشائعة minimumFractionDigits و maximumFractionDigits و style.

import { FormattedNumber } from "react-intl";

export default function Statistics({ value }: { value: number }) {
  return (
    <dl>
      <dt>إجمالي المستخدمين</dt>
      <dd>
        <FormattedNumber
          value={value}
          minimumFractionDigits={0}
          maximumFractionDigits={0}
        />
      </dd>
      <dt>معدل التحويل</dt>
      <dd>
        <FormattedNumber
          value={value / 100}
          style="percent"
          minimumFractionDigits={2}
        />
      </dd>
    </dl>
  );
}

تتوافق هذه الخصائص مع Intl.NumberFormatOptions، مما يمنحك التحكم في الدقة والعرض مع الحفاظ على فواصل خاصة باللغة المحلية.

3. تنسيق الأرقام بشكل إلزامي باستخدام useIntl hook

عندما يمكن التعبير عن المكون كمكون وظيفي، يوفر hook المسمى useIntl إمكانية الوصول إلى كائن intl، الذي يتضمن طريقة formatNumber.

import { useIntl } from "react-intl";

export default function DataTable({ rows }: { rows: number[] }) {
  const intl = useIntl();

  return (
    <table>
      <tbody>
        {rows.map((value, index) => (
          <tr key={index}>
            <td>{intl.formatNumber(value)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

تُرجع وظيفة formatNumber سلسلة رقمية منسقة وتقبل قيمة يمكن تحليلها كرقم، إلى جانب خيارات تتوافق مع NumberFormatOptions.

4. تنسيق الأرقام في سياقات غير JSX

استخدم formatNumber عندما تحتاج إلى أرقام منسقة في السمات أو المتغيرات أو السياقات الأخرى حيث لا يمكن استخدام المكونات.

import { useIntl } from "react-intl";

export default function Chart({ dataPoints }: { dataPoints: number[] }) {
  const intl = useIntl();

  const formattedLabel = intl.formatNumber(dataPoints[0], {
    notation: "compact",
    maximumFractionDigits: 1,
  });

  return (
    <div>
      <img
        src="/chart.png"
        alt={`رسم بياني يوضح ${formattedLabel} عنصر`}
        title={formattedLabel}
      />
    </div>
  );
}

تعتبر واجهة البرمجة الإلزامية ضرورية لتعيين سمات النص مثل title و aria-label أو alt، حيث لا يمكن عرض مكونات React.