عرض أسماء ورموز العملات
إظهار معلومات العملة بطريقة محلية
المشكلة
يحتاج التطبيق إلى الإشارة إلى عملة، مثل 'USD'. مجرد إظهار هذا الرمز غامض. إظهار الاسم الكامل 'US Dollar' أفضل، لكن هذا الاسم نفسه يحتاج إلى ترجمة ('dólar estadounidense'، 'Dollar américain'). علاوة على ذلك، يمكن أن يكون الرمز الصحيح ($، US$، CA$) غامضاً بدون سياق.
الحل
استخدم مكون FormattedNumber من react-intl مع خيار currencyDisplay. يتيح لك هذا عرض العملة كرمز لها (الافتراضي)، أو اسمها الكامل المحلي، أو رمز ISO الخاص بها، كل ذلك مع التنسيق الصحيح للغة المحلية الحالية.
الخطوات
1. إنشاء مكون عميل لعرض العملة
يجب استخدام مكون FormattedNumber داخل مكون عميل. أنشئ ملفاً app/components/LocalizedCurrency.tsx يأخذ خيار currencyDisplay كخاصية لجعله قابلاً لإعادة الاستخدام.
// app/components/LocalizedCurrency.tsx
'use client';
import { FormattedNumber } from 'react-intl';
type Props = {
value: number;
currency: string;
displayAs: 'symbol' | 'name' | 'code';
};
export default function LocalizedCurrency({
value,
currency,
displayAs,
}: Props) {
return (
<FormattedNumber
value={value}
style="currency"
currency={currency}
currencyDisplay={displayAs}
/>
);
}
يقبل هذا المكون الآن خاصية displayAs التي تتحكم مباشرة في خيار currencyDisplay.
2. استخدام المكون في صفحة
يمكنك الآن استخدام هذا المكون في صفحة لإظهار تنسيقات العملة المختلفة عن طريق تغيير خاصية displayAs.
// app/[lang]/page.tsx
import LocalizedCurrency from '@/app/components/LocalizedCurrency';
export default function Home() {
const price = 1250.75;
const currency = 'USD';
return (
<div>
<h1>Currency Display Options</h1>
<p>
Default (symbol):
<LocalizedCurrency
value={price}
currency={currency}
displayAs="symbol"
/>
</p>
<p>
Full name (name):
<LocalizedCurrency
value={price}
currency={currency}
displayAs="name"
/>
</p>
<p>
ISO code (code):
<LocalizedCurrency
value={price}
currency={currency}
displayAs="code"
/>
</p>
</div>
);
}
عند زيارة /en، سترى "1,250.75 US dollars" لخيار 'name'. عند زيارة /es، سيتم عرض نفس السطر كـ "1.250,75 dólares estadounidenses"، مما يوضح أن اسم العملة نفسه قد تمت ترجمته وتنسيقه بشكل صحيح.