Vue Academy · درس

تنسيق الأرقام والتواريخ والعملات

‏n() للأرقام، وd() للتواريخ، وتنسيقات التاريخ والوقت، وnumberFormats لكل لغة

تنسيق الأرقام والتواريخ والعملات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

تختلف الأعداد والتواريخ باختلاف اللغة المحلية

يُكتب 1,000.50 في الولايات المتحدة بالشكل 1.000,50 في أجزاء كبيرة من أوروبا. كما تختلف التواريخ والعملات. وتغلّف Vue I18n واجهات برمجة التطبيقات Intl في المتصفح، بحيث تُعرض الأعداد والتواريخ والنقود بالشكل الصحيح لكل لغة محلية.

إعداد numberFormats

عرّفوا تنسيقات أعداد مسمّاة لكل لغة محلية في الخيار numberFormats لدى createI18n. وكل تنسيق مسمّى هو كائن خيارات لـ Intl.NumberFormat.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

الدالة n()

نسّقوا عددًا باستخدام n(value, formatName) من useI18n()، أو باستخدام $n في القوالب. وتستخدم هذه الدالة التنسيق المسمّى للغة المحلية النشطة.

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

تنسيق العملات

يضيف نمط currency الرمز الصحيح والفواصل التجميعية. ويتحكم رمز العملة في إعدادات التنسيق في الرمز الذي سيظهر.

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

إخراج العملات وفق اللغة المحلية

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

numberFormats: {
  en: { currency: { style: "currency", currency: "USD" } },
  tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)

النسب المئوية

يضرب نمط percent القيمة في 100، ثم يضيف علامة النسبة المئوية وفق اللغة المحلية.

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

إعداد datetimeFormats

يماثل تنسيق التواريخ تنسيق الأعداد. عرّفوا تنسيقات مسمّاة ضمن datetimeFormats، بحيث يكون كل منها كائن خيارات لـ Intl.DateTimeFormat.

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

الدالة d()

نسّقوا كائن Date باستخدام d(value, formatName) (أو $d في القوالب). مرّروا كائن Date أو طابعًا زمنيًا.

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

التواريخ وفق اللغة المحلية

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

datetimeFormats: {
  en: { short: { year: "numeric", month: "short", day: "numeric" } },
  tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)

استخدام مساعدات التنسيق في القوالب

استخدموا في القوالب $n و$d مع قيمة والتنسيق المسمّى.

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

خيارات مضمّنة لمرة واحدة

إلى جانب التنسيقات المسماة، يمكنكم تمرير كائن خيارات مضمّن كوسيط ثانٍ لتنسيق يُستخدم لمرة واحدة، من دون تعريفه في الإعدادات.

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

تحقق سريع

تحققوا من فهمكم للتنسيق المراعي للإعدادات المحلية.

مراجعة

لقد تعلمتم التنسيق المراعي للإعدادات المحلية:

اضبطوا التنسيقات المسماة ضمن numberFormats وdatetimeFormats لكل إعداد محلي.
تنسّق n(value, name) / $n الأرقام بأنماط عشرية، وعملات، ونسب مئوية.
تنسّق d(value, name) / $d التواريخ.
يؤدي تغيير locale تلقائيًا إلى تغيير تجميع الأرقام، والفواصل العشرية، والرموز، وترتيب التاريخ.
يمكنكم أيضًا تمرير كائن خيارات مضمّن لإجراء تنسيق لمرة واحدة.

الأسئلة الشائعة

هل درس «تنسيق الأرقام والتواريخ والعملات» مجاني؟

نعم — نص درس «تنسيق الأرقام والتواريخ والعملات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «تنسيق الأرقام والتواريخ والعملات»؟

‏n() للأرقام، وd() للتواريخ، وتنسيقات التاريخ والوقت، وnumberFormats لكل لغة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «تنسيق الأرقام والتواريخ والعملات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy