كيفية تنسيق المبالغ النقدية في Next.js (موجه الصفحات) الإصدار 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، مما يضمن أن تقوم التقنيات المساعدة بإعلان الأسعار بالتنسيق الصحيح للغة المستخدم المحلية.