كيفية تنسيق مبالغ العملات في TanStack Start v1

المشكلة

تجمع الأسعار بين تحديين في التوطين: تمثيل العملة وتنسيق الأرقام. تظهر نفس القيمة النقدية كـ $1,200.50 في الولايات المتحدة و 1 200,50 € في ألمانيا. يتغير موضع رمز العملة، وتتبادل فواصل الأرقام العشرية والتجميع، وحتى المسافات تتغير.

هذه الاتفاقيات ليست تفضيلات بل توقعات. عرض الأسعار بتنسيق غير مألوف يجعل المستخدمين يتساءلون عما إذا كانوا يرون المبلغ الصحيح. السعر المعروض كـ "1200.50 EUR" لمستخدم ألماني أو "1.200,50$" لمستخدم أمريكي يخلق احتكاكًا ويقوض الثقة.

الحل

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

استخدم طريقة formatNumber من react-intl مع خيار style: 'currency' لتطبيق كل من رمز العملة واتفاقيات تنسيق اللغة المحلية للمستخدم. تتعامل واجهة برمجة التطبيقات Intl.NumberFormat في المتصفح مع وضع الرمز، واختيار الفاصل، والمسافات تلقائيًا.

الخطوات

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

قم ببناء مكون قابل لإعادة الاستخدام يقبل قيمة رقمية ورمز عملة، ثم ينسق السعر باستخدام اللغة المحلية للمستخدم.

import { useIntl } from "react-intl";

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

export function Price({ value, currency }: PriceProps) {
  const intl = useIntl();

  const formattedPrice = intl.formatNumber(value, {
    style: "currency",
    currency: currency,
  });

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

يوفر الخطاف useIntl الوصول إلى واجهة برمجة التنسيق. تطبق طريقة formatNumber مع style: 'currency' كلاً من رمز العملة وتنسيق الأرقام الخاص باللغة المحلية.

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

اعرض الأسعار في جميع أنحاء تطبيقك من خلال تمرير المبلغ الرقمي ورمز العملة.

export default function ProductCard() {
  return (
    <div>
      <h2>Premium Plan</h2>
      <Price value={1200.5} currency="USD" />
    </div>
  );
}

يقوم المكون تلقائيًا بتنسيق السعر وفقًا للغة المستخدم. سيرى المستخدم الأمريكي "$1,200.50" بينما سيرى المستخدم الألماني "1.200,50 $".

3. تنسيق الأسعار بدقة عشرية مخصصة

تحكم في عدد المنازل العشرية المعروضة بإضافة خيارات minimumFractionDigits و maximumFractionDigits.

export function PriceWithPrecision({ value, currency }: PriceProps) {
  const intl = useIntl();

  const formattedPrice = intl.formatNumber(value, {
    style: "currency",
    currency: currency,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

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

هذا يضمن عرضًا عشريًا متسقًا عبر جميع الأسعار، حتى عندما تكون القيمة رقمًا كاملًا مثل 100.

4. إنشاء مساعد للتنسيق المباشر

للحالات التي لا تكون فيها الحاجة إلى مكون غلاف ضرورية، قم بإنشاء دالة مساعدة للتنسيق.

import { useIntl } from "react-intl";

export function useFormatCurrency() {
  const intl = useIntl();

  return (value: number, currency: string) => {
    return intl.formatNumber(value, {
      style: "currency",
      currency: currency,
    });
  };
}

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

export function CheckoutSummary({ total }: { total: number }) {
  const formatCurrency = useFormatCurrency();

  return (
    <button aria-label={`Pay ${formatCurrency(total, "USD")}`}>Checkout</button>
  );
}

تُرجع الدالة المساعدة سلسلة نصية بسيطة مناسبة لأي سياق لا يمكن فيه استخدام مكونات JSX.