كيفية عرض معلومات العملة في React Router v7

المشكلة

غالبًا ما تحتاج التطبيقات إلى عرض معلومات العملة دون إظهار سعر منسق. قد يعرض محدد العملة "USD" أو "الدولار الأمريكي"، بينما قد تعرض لوحة معلومات مالية رمز "$" فقط. يخدم كل تنسيق غرضًا مختلفًا، لكنها جميعًا تشترك في تحديات مشتركة. رمز ISO "USD" دقيق لكنه غير مألوف للمستخدمين غير التقنيين. الاسم الكامل "الدولار الأمريكي" واضح لكنه يتطلب ترجمة للجمهور الدولي. الرمز "$" مضغوط لكنه غامض—يمكن أن يمثل الدولار الأمريكي أو الكندي أو الأسترالي حسب السياق. اختيار التنسيق الخاطئ يربك المستخدمين ويقوض الثقة في الواجهات المالية.

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

الحل

استخدم طريقة formatDisplayName من react-intl لعرض أسماء ورموز العملات المحلية، واستفد من واجهة برمجة التطبيقات Intl.NumberFormat الخاصة بالمتصفح لاستخراج رموز العملات. تقبل طريقة formatDisplayName رمز عملة وتعيد الاسم المحلي المناسب بناءً على لغة المستخدم المحلية، مع معالجة الترجمة تلقائيًا. بالنسبة للرموز، قم بتنسيق رقم عينة بالعملة واستخرج جزء الرمز من النتيجة.

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

الخطوات

1. إنشاء دالة مساعدة لعرض أسماء العملات المترجمة

استخدم الدالة formatDisplayName مع type: 'currency' لتحويل رموز العملات ISO إلى أسماء كاملة مترجمة.

import { useIntl } from "react-intl";

export function CurrencyName({ code }: { code: string }) {
  const intl = useIntl();
  const name = intl.formatDisplayName(code, { type: "currency" });
  return <span>{name}</span>;
}

عندما تكون اللغة "en" والرمز "CNY"، يعرض هذا "Chinese Yuan". تقوم الدالة تلقائياً بترجمة الاسم بناءً على اللغة الحالية من IntlProvider.

2. إنشاء دالة مساعدة لاستخراج وعرض رموز العملات

استخدم Intl.NumberFormat مع formatToParts لاستخراج رمز العملة عن طريق التصفية للأجزاء التي تحتوي على type === "currency".

function getCurrencySymbol(locale: string, currency: string): string {
  const parts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency,
    currencyDisplay: "narrowSymbol",
  }).formatToParts(0);

  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart?.value || currency;
}

export function CurrencySymbol({ code }: { code: string }) {
  const intl = useIntl();
  const symbol = getCurrencySymbol(intl.locale, code);
  return <span>{symbol}</span>;
}

يتحكم الخيار currencyDisplay في شكل العملة، حيث يوفر "narrowSymbol" التمثيل الأكثر إيجازاً. يتعامل هذا النهج تلقائياً مع موضع الرمز والتنسيق الخاص باللغة.

3. إنشاء مكون يوفر خيارات عرض متعددة

قم ببناء مكون مرن يقبل خاصية وضع العرض للتبديل بين تنسيقات الرمز والرمز المختصر والاسم.

import { useIntl } from "react-intl";

type CurrencyDisplayMode = "code" | "symbol" | "name";

interface CurrencyInfoProps {
  code: string;
  display?: CurrencyDisplayMode;
}

export function CurrencyInfo({ code, display = "symbol" }: CurrencyInfoProps) {
  const intl = useIntl();

  if (display === "name") {
    const name = intl.formatDisplayName(code, { type: "currency" });
    return <span>{name}</span>;
  }

  if (display === "symbol") {
    const parts = new Intl.NumberFormat(intl.locale, {
      style: "currency",
      currency: code,
      currencyDisplay: "narrowSymbol",
    }).formatToParts(0);
    const symbol =
      parts.find((part) => part.type === "currency")?.value || code;
    return <span>{symbol}</span>;
  }

  return <span>{code}</span>;
}

يركز هذا المكون منطق عرض العملة ويسهل تبديل التنسيقات بناءً على سياق واجهة المستخدم. استخدم display="name" لمحددات العملات حيث الوضوح مهم، وdisplay="symbol" للعروض المدمجة مثل رؤوس الجداول، وdisplay="code" للتقارير التقنية أو المالية.

4. استخدام المكون في سياقات مختلفة

قم بتطبيق وضع العرض المناسب بناءً على مكان ظهور معلومات العملة في واجهتك.

export default function CurrencyExample() {
  return (
    <div>
      <label htmlFor="currency-select">
        Select currency: <CurrencyInfo code="EUR" display="name" />
      </label>

      <table>
        <thead>
          <tr>
            <th>
              Amount (<CurrencyInfo code="USD" display="symbol" />)
            </th>
          </tr>
        </thead>
      </table>

      <p>
        Transaction currency: <CurrencyInfo code="GBP" display="code" />
      </p>
    </div>
  );
}

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