كيفية عرض العملة كرمز، أو رمز دولي، أو اسم

مقدمة

عند عرض سعر أو مبلغ نقدي، تحتاج إلى تحديد كيفية تمثيل العملة. قد يظهر سعر المنتج بصيغة $25 أو USD 25 أو 25 دولار أمريكي. كل صيغة تخدم غرضًا مختلفًا وتعمل بشكل أفضل في سياقات مختلفة.

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

توفر جافا سكريبت خيار currencyDisplay في Intl.NumberFormat للتحكم في كيفية ظهور العملات. يشرح هذا الدرس الصيغ الأربعة المتاحة، وكيف تختلف عبر اللغات المحلية، وأي صيغة تختار لحالة الاستخدام المحددة.

فهم خيار currencyDisplay

يتحكم خيار currencyDisplay في كيفية ظهور وحدة العملة عند تنسيق المبالغ النقدية. لا يغير القيمة العددية، بل فقط كيفية تمثيل العملة.

تتوفر أربع قيم:

symbol تعرض رمز عملة محلي مثل $ أو €
narrowSymbol تعرض رمزًا مختصرًا مثل $ بدلاً من US$
code تعرض رمز العملة ISO مثل USD أو EUR
name تعرض اسم العملة الكامل مثل دولار أمريكي أو يورو

تنشئ كل صيغة تمثيلًا مرئيًا مختلفًا للمبلغ نفسه. يعتمد الاختيار على متطلبات واجهة المستخدم، والمساحة المتاحة، وتوقعات الجمهور.

استخدام صيغة الرمز للعروض اليومية

صيغة symbol هي القيمة الافتراضية لـ currencyDisplay. تُظهر رمز عملة محلي يتوقع المستخدمون في لغة محلية معينة رؤيته.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(formatter.format(25));
// Output: "$25.00"

تنتج هذه الصيغة التمثيل الأكثر مألوفية للمستخدمين. يتوقع الأمريكيون رؤية علامات الدولار، ويتوقع الأوروبيون رؤية رموز اليورو، ويتوقع المستخدمون البريطانيون رؤية رموز الجنيه.

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

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Output: "$25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 $"

لاحظ كيف يضع المنسق الألماني علامة الدولار بعد المبلغ ويستخدم فاصلة لفاصل العشري. يتم تطبيق هذه الاتفاقيات الخاصة باللغة المحلية تلقائيًا.

عند تنسيق اليورو للغات محلية مختلفة، يظهر رمز اليورو ولكن تتغير اتفاقيات التنسيق.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Output: "€25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 €"

تعمل صيغة الرمز بشكل جيد عندما يعمل المستخدمون ضمن سياق عملة واحدة. يمكن لموقع تجارة إلكترونية أمريكي يعرض الأسعار بالدولار الأمريكي استخدام علامات الدولار بأمان. يمكن لموقع أوروبي يعرض الأسعار باليورو استخدام رموز اليورو.

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

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(usFormatter.format(25));
// Output: "CA$25.00"

يضيف المنسق CA$ للتمييز بين الدولارات الكندية والدولارات الأمريكية عند التنسيق للغة المحلية الأمريكية.

استخدام تنسيق narrowSymbol للعروض المضغوطة

يعرض تنسيق narrowSymbol رمز العملة بدون بادئات البلد. وهذا يخلق تمثيلاً أكثر إيجازاً يعمل بشكل جيد في الواجهات ذات المساحة المحدودة.

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// Output: "$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "$25.00"

بالنسبة للدولار الأمريكي في اللغة المحلية الأمريكية، ينتج كلا التنسيقين نفس المخرجات لأنه لا حاجة لبادئة البلد. يظهر الفرق بوضوح عند تنسيق العملات التي قد تتضمن تعيين البلد.

const symbolFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'symbol'
});

console.log(symbolFormatter.format(25));
// Output: "CA$25.00"

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "$25.00"

يزيل تنسيق الرمز الضيق البادئة CA، ويظهر فقط علامة الدولار. هذا يوفر مساحة ولكنه يفقد التمييز بين الدولار الكندي والأمريكي.

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

يؤثر التنسيق الضيق أيضًا على العملات الأخرى عبر اللغات المحلية المختلفة.

const narrowFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "25,00 €"

تحدد كل لغة محلية تنسيق الرمز الضيق الخاص بها بناءً على الاتفاقيات المحلية.

استخدام تنسيق الكود للعروض الواضحة

يعرض تنسيق code رمز العملة وفقًا لمعيار ISO 4217 بدلاً من الرمز. يحدد هذا الرمز المكون من ثلاثة أحرف كل عملة بشكل فريد دون غموض.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});

console.log(formatter.format(25));
// Output: "USD 25.00"

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

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(usFormatter.format(25));
// Output: "EUR 25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(deFormatter.format(25));
// Output: "25,00 EUR"

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

يزيل تنسيق الكود الالتباس بين العملات التي تشترك في الرموز.

const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
});

console.log(usdFormatter.format(25));
// Output: "USD 25.00"

const cadFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'CAD',
  currencyDisplay: 'code'
});

console.log(cadFormatter.format(25));
// Output: "CAD 25.00"

const audFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'AUD',
  currencyDisplay: 'code'
});

console.log(audFormatter.format(25));
// Output: "AUD 25.00"

يحصل كل نوع من الدولار على رمز مميز. يمكن للمستخدمين التمييز فورًا بين الدولار الأمريكي والدولار الكندي والدولار الأسترالي.

استخدم تنسيق الكود في التقارير المالية والفواتير الدولية وأنظمة المحاسبة وأي سياق تكون فيه وضوح العملة أمرًا حاسمًا. يعمل التنسيق أيضًا بشكل جيد في واجهات برمجة التطبيقات وتصدير البيانات حيث قد تسبب الرموز مشاكل في الترميز.

المقايضة هي انخفاض الألفة. معظم المستهلكين يتعرفون على $ ولكن قد لا يعرفون على الفور ما يمثله CAD. استخدم الرموز عندما يفهمها جمهورك أو عندما تفوق الدقة الألفة.

استخدام تنسيق الاسم للحصول على أقصى وضوح

يعرض تنسيق name الاسم الكامل للعملة بلغة المنطقة المحلية. وهذا يوفر وضوحًا كاملًا حول العملة التي يمثلها المبلغ.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});

console.log(formatter.format(25));
// Output: "25.00 US dollars"

يظهر اسم العملة مكتوبًا بالكامل، مما لا يترك أي غموض حول ما يمثله المبلغ. هذا التنسيق قيّم بشكل خاص لإمكانية الوصول. يمكن لقارئات الشاشة نطق أسماء العملات بوضوح، بينما قد يتم إعلان الرموز بشكل غير متسق.

يتكيف الاسم مع المنطقة المحلية، ويعرض باللغة المناسبة.

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(25));
// Output: "25.00 euros"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(25));
// Output: "25,00 Euro"

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(frFormatter.format(25));
// Output: "25,00 euros"

تستخدم الإنجليزية euros، وتستخدم الألمانية Euro، وتستخدم الفرنسية euros. تتعامل واجهة برمجة التطبيقات مع هذه الاختلافات اللغوية تلقائيًا، بما في ذلك صيغ الجمع حيثما كان ذلك مناسبًا.

تُظهر العملات المختلفة أسماءها باللغة المناسبة لكل منطقة محلية.

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(enFormatter.format(1000));
// Output: "1,000 Japanese yen"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(1000));
// Output: "1.000 Japanische Yen"

تُظهر الإنجليزية Japanese yen بينما تُظهر الألمانية Japanische Yen. تساعد هذه الترجمة المستخدمين على فهم العملات غير المألوفة بلغتهم الخاصة.

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

المقايضة هي المساحة. أسماء العملات أطول بكثير من الرموز أو الرموز المختصرة. قد تواجه واجهة الهاتف المحمول المدمجة صعوبة في ملاءمة 25.00 US dollars حيث يمكن أن يعمل $25.00 بشكل جيد.

اختيار تنسيق العرض المناسب

اختر قيمة currencyDisplay بناءً على قيود المساحة، وألفة الجمهور، ومخاوف الغموض.

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

استخدم narrowSymbol عندما تكون المساحة محدودة للغاية وسياق العملة واضح. تستفيد تطبيقات الهاتف المحمول والجداول المدمجة وأدوات لوحة المعلومات من التنسيق الأقصر. تأكد من تحديد العملة في مكان آخر في الواجهة.

استخدم code عندما تحتاج إلى التمييز بين عملات متعددة دون غموض. تحتاج التطبيقات المالية ومحولات العملات وأدوات الأعمال الدولية وأنظمة المحاسبة إلى الدقة التي توفرها الرموز. يعمل التنسيق أيضًا بشكل جيد في السياقات التقنية حيث قد تسبب الرموز مشاكل.

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

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

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

دمج currencyDisplay مع خيارات أخرى

يعمل خيار currencyDisplay مع جميع خيارات تنسيق الأرقام الأخرى. يمكنك التحكم في المنازل العشرية والتقريب وعرض الإشارة أثناء اختيار تنسيق العملة الخاص بك.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(25.5));
// Output: "USD 25.50"

يظهر تنسيق الرمز مع إعدادات المنازل العشرية المحددة. يمكنك دمج currencyDisplay مع أي خيار آخر مثل signDisplay أو notation أو قواعد التقريب المخصصة.

تعمل تنسيقات العرض المختلفة مع ترميز المحاسبة.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name',
  currencySign: 'accounting'
});

console.log(formatter.format(-25));
// Output: "(25.00 US dollars)"

تجتمع أقواس تنسيق المحاسبة مع اسم العملة المكتوب بالكامل.

ما يجب تذكره

يتحكم خيار currencyDisplay في كيفية ظهور وحدات العملة في المبالغ المنسقة. استخدم symbol للعرض اليومي المألوف، وnarrowSymbol للواجهات المحدودة المساحة، وcode للسياقات الدولية الواضحة، وname لأقصى قدر من الوضوح وسهولة الوصول.

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