كيفية تنسيق الأرقام للغات المختلفة في React Router v7

المشكلة

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

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

الحل

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

توفر React-intl طرق تنسيق تستفيد من واجهة Intl.NumberFormat المدمجة في المتصفح، والتي تتعامل مع تعقيد الاصطلاحات الرقمية الإقليمية. من خلال تمرير القيم الرقمية عبر هذه المنسقات، ينتج التطبيق مخرجات تطابق توقعات المستخدم دون منطق فواصل يدوي.

الخطوات

1. إنشاء مكون ينسق الأرقام باستخدام useIntl

يوفر الخطاف useIntl الوصول إلى طرق التنسيق بما في ذلك formatNumber، والذي يقبل قيمة رقمية ويعيد سلسلة نصية منسقة حسب اللغة.

import { useIntl } from "react-intl";

export default function ProductPrice() {
  const intl = useIntl();
  const price = 1234.56;

  return (
    <div>
      <p>Price: {intl.formatNumber(price)}</p>
    </div>
  );
}

تطبق طريقة formatNumber تلقائياً الفواصل الصحيحة للغة الحالية. يرى المستخدم الذي لديه لغة en-US "1,234.56" بينما يرى المستخدم الذي لديه لغة de-DE "1.234,56".

2. تنسيق قيم العملات باستخدام خيارات الأنماط

تقبل الدالة formatNumber خيارات متوافقة مع Intl.NumberFormatOptions، بما في ذلك تنسيق العملات.

import { useIntl } from "react-intl";

export default function ProductPrice() {
  const intl = useIntl();
  const price = 1234.56;

  return (
    <div>
      <p>
        {intl.formatNumber(price, {
          style: "currency",
          currency: "USD",
        })}
      </p>
    </div>
  );
}

ينتج هذا "$1,234.56" للغة en-US و"1.234,56 $" للغة de-DE، مع تطبيق اصطلاحات الفواصل ورموز العملات.

3. استخدام FormattedNumber للتنسيق التصريحي

يوفر المكون FormattedNumber بديلاً تصريحياً يقبل نفس الخيارات كخصائص.

import { FormattedNumber } from "react-intl";

export default function Statistics() {
  const totalUsers = 1500000;
  const growthRate = 0.23;

  return (
    <div>
      <p>
        Total users: <FormattedNumber value={totalUsers} />
      </p>
      <p>
        Growth rate: <FormattedNumber value={growthRate} style="percent" />
      </p>
    </div>
  );
}

يعرض المكون الرقم المنسق مباشرة في DOM. بالنسبة للغة en-US، يعرض "1,500,000" و"23%". بالنسبة للغة de-DE، يعرض "1.500.000" و"23 %".

4. تنسيق الأرقام من بيانات المحمل

في React Router 7، تصل مكونات المسار إلى بيانات المحمل عبر الخطاف useLoaderData. ادمج هذا مع تنسيق الأرقام لعرض القيم المقدمة من الخادم.

import { useLoaderData } from "react-router";
import { FormattedNumber } from "react-intl";

export async function loader() {
  return {
    revenue: 45678.9,
    units: 12500,
  };
}

export default function Dashboard() {
  const { revenue, units } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>Dashboard</h1>
      <p>
        Revenue:{" "}
        <FormattedNumber value={revenue} style="currency" currency="USD" />
      </p>
      <p>
        Units sold: <FormattedNumber value={units} />
      </p>
    </div>
  );
}

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