كيفية عرض معلومات العملة في React Router الإصدار السابع

المشكلة

غالبًا ما تحتاج التطبيقات إلى عرض معلومات العملة دون إظهار سعر منسق. قد يعرض محدد العملة "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">
        اختر العملة: <CurrencyInfo code="EUR" display="name" />
      </label>

      <table>
        <thead>
          <tr>
            <th>
              المبلغ (<CurrencyInfo code="USD" display="symbol" />)
            </th>
          </tr>
        </thead>
      </table>

      <p>
        عملة المعاملة: <CurrencyInfo code="GBP" display="code" />
      </p>
    </div>
  );
}

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