كيفية تنسيق المبالغ النقدية في Next.js (Pages Router) الإصدار 16

المشكلة

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

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

الحل

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

الخطوات

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

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

import { FormattedNumber } from "react-intl";

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

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

يقرأ مكون FormattedNumber اللغة من أقرب IntlProvider ويطبق رمز العملة وقواعد تنسيق الأرقام الخاصة باللغة تلقائيًا.

2. استخدم المكون في صفحة تحتوي على بيانات تسعير ديناميكية

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

import { GetServerSideProps } from "next";
import Price from "../components/Price";

interface Product {
  id: string;
  name: string;
  price: number;
  currency: string;
}

interface ProductPageProps {
  product: Product;
}

export default function ProductPage({ product }: ProductPageProps) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>
        <Price value={product.price} currency={product.currency} />
      </p>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async () => {
  const product = {
    id: "1",
    name: "Wireless Headphones",
    price: 1299.99,
    currency: "USD",
  };

  return {
    props: {
      product,
    },
  };
};

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

3. أنشئ دالة مساعدة لتنسيق العملة الحتمي

للسيناريوهات التي لا يمكن فيها استخدام مكون React، مثل تعيين السمات أو إعداد البيانات لسياقات غير JSX، قم بإتاحة دالة تنسيق باستخدام خطاف useIntl.

import { useIntl } from "react-intl";

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

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

يُرجع هذا الخطاف دالة تقوم بتنسيق قيم العملة كسلاسل نصية، وهو مفيد لتسميات aria أو علامات meta أو سياقات نصية أخرى حيث لا تكون المكونات مناسبة.

4. طبق المنسق في سياقات السمات

استخدم المنسق الحتمي لملء سمات HTML التي تتطلب نصًا عاديًا بدلاً من عناصر React.

import { useCurrencyFormatter } from "../hooks/useCurrencyFormatter";

interface ProductCardProps {
  name: string;
  price: number;
  currency: string;
  imageUrl: string;
}

export default function ProductCard({
  name,
  price,
  currency,
  imageUrl,
}: ProductCardProps) {
  const formatCurrency = useCurrencyFormatter();
  const priceLabel = formatCurrency(price, currency);

  return (
    <article aria-label={`${name}, ${priceLabel}`}>
      <img src={imageUrl} alt={name} />
      <h2>{name}</h2>
      <p>{priceLabel}</p>
    </article>
  );
}

ينتج المنسق سلسلة عملة محلية يمكن تضمينها في سمة aria-label، مما يضمن إعلان التقنيات المساعدة عن الأسعار بالتنسيق الصحيح للغة المستخدم.