كيفية تنسيق مبالغ العملات في React Router v7

المشكلة

يتطلب عرض الأسعار في تطبيقات الويب التعامل مع مسألتين مترابطتين للتوطين: العملة المستخدمة والاتفاقيات الإقليمية لعرض القيم النقدية. فسعر 1200.50 دولار أمريكي يظهر كـ "$1,200.50" للمستخدمين في الولايات المتحدة ولكن كـ "1 200,50 $US" في فرنسا. موضع رمز العملة، وفاصل الكسور العشرية، وتجميع الآلاف، والمسافات جميعها تختلف حسب اللغة المحلية. عندما لا يتم احترام هذه الاتفاقيات، قد يسيء المستخدمون قراءة المبالغ أو يشككون في صحة السعر، مما يقوض الثقة في التطبيق.

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

الحل

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

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

الخطوات

1. إنشاء مكون تنسيق العملة قابل لإعادة الاستخدام

قم ببناء مكون يستخدم FormattedNumber من react-intl مع خصائص style وcurrency لتنسيق القيم النقدية.

import { FormattedNumber } from "react-intl";

interface PriceProps {
  amount: number;
  currency: string;
}

export function Price({ amount, currency }: PriceProps) {
  return (
    <FormattedNumber value={amount} style="currency" currency={currency} />
  );
}

يستخدم مكون FormattedNumber واجهة برمجة التطبيقات formatNumber ويقبل Intl.NumberFormatOptions. يخبر الخيار style="currency" المنسق بتضمين رموز العملة، وتحدد خاصية currency العملة التي سيتم عرضها.

2. استخدام مكون السعر في مكونات المسار

قم بعرض الأسعار في أي مكون مسار React Router عن طريق تمرير القيمة العددية ورمز العملة.

import { Price } from "~/components/Price";

export default function ProductPage() {
  const product = {
    name: "Wireless Headphones",
    price: 129.99,
    currency: "USD",
  };

  return (
    <div>
      <h1>{product.name}</h1>
      <p>
        <Price amount={product.price} currency={product.currency} />
      </p>
    </div>
  );
}

يقوم مكون السعر تلقائيًا بتنسيق المبلغ وفقًا للإعدادات المحلية المكونة في IntlProvider. بالنسبة للإعدادات المحلية الأمريكية، يتم عرض "$129.99"؛ وبالنسبة للإعدادات المحلية الألمانية بنفس عملة الدولار الأمريكي، يتم عرض "129,99 $".

3. تنسيق العملة بشكل إلزامي عند الحاجة

للسيناريوهات التي تحتاج فيها إلى السلسلة المنسقة مباشرة، استخدم خطاف useIntl للوصول إلى طريقة formatNumber.

import { useIntl } from "react-intl";

export default function CheckoutSummary() {
  const intl = useIntl();
  const subtotal = 89.99;
  const tax = 7.2;
  const total = subtotal + tax;

  const formattedTotal = intl.formatNumber(total, {
    style: "currency",
    currency: "EUR",
  });

  return (
    <div>
      <h2>Order Summary</h2>
      <dl>
        <dt>Subtotal</dt>
        <dd>
          {intl.formatNumber(subtotal, {
            style: "currency",
            currency: "EUR",
          })}
        </dd>
        <dt>Tax</dt>
        <dd>
          {intl.formatNumber(tax, {
            style: "currency",
            currency: "EUR",
          })}
        </dd>
        <dt>Total</dt>
        <dd aria-label={`Total: ${formattedTotal}`}>
          <strong>{formattedTotal}</strong>
        </dd>
      </dl>
    </div>
  );
}

تقبل طريقة formatNumber قيمة وكائن خيارات مع FormatNumberOptions. هذا مفيد عندما تحتاج إلى السلسلة المنسقة للسمات أو التسجيل أو سياقات غير JSX.

4. التحكم في دقة الأرقام العشرية للعملات ذات الأرقام الكاملة

بعض العملات لا تستخدم وحدات كسرية. قم بضبط عدد المنازل العشرية لتتناسب مع اتفاقيات العملة.

import { FormattedNumber } from "react-intl";

interface PriceProps {
  amount: number;
  currency: string;
}

export function Price({ amount, currency }: PriceProps) {
  const isWholeNumberCurrency = currency === "JPY" || currency === "KRW";

  return (
    <FormattedNumber
      value={amount}
      style="currency"
      currency={currency}
      minimumFractionDigits={isWholeNumberCurrency ? 0 : 2}
      maximumFractionDigits={isWholeNumberCurrency ? 0 : 2}
    />
  );
}

الين الياباني لا يستخدم وحدة فرعية، لذلك يتم عرض المبالغ بدون أرقام عشرية. تتجاوز خيارات minimumFractionDigits وmaximumFractionDigits سلوك الأرقام العشرية الافتراضي عند الضرورة.