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

استخدم خيار currencyDisplay للتحكم في ظهور العملات كـ $ أو USD أو دولار أمريكي

مقدمة

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

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

توفر JavaScript خيار 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 دولار أمريكي حيث يعمل $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 مع خيارات التنسيق الأخرى لإنشاء التمثيل الدقيق الذي يحتاجه تطبيقك.