Vue Academy · درس

التعددية والرسائل المرتبطة

قواعد التعددية وبنية ‎@:key|@:key‎، والتعددية حسب count، والرسائل المرتبطة باستخدام ‎@:path‎

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

العدّ يختلف باختلاف اللغة

نقول "1 item" لكن "5 items" — ولدى اللغات الأخرى صيغ أكثر من ذلك. يؤدي تضمين صيغ الجمع مباشرةً إلى نصوص غير طبيعية مثل "5 item(s)". توفر Vue I18n ميزة التصريف بحسب العدد المدمجة لاختيار الصيغة المناسبة للعدد.

صيغ الجمع المفصولة بعلامة pipe

اكتبوا الصيغ في سلسلة رسالة واحدة، وافصلوا بينها بحرف pipe (|). في اللغة الإنجليزية، تكون صيغتان أو ثلاث صيغ هي النمط المعتاد.

const en = {
  items: "no items | one item | {count} items",
}

اختيار صيغة الجمع باستخدام عدد

مرّروا عددًا باعتباره الوسيط الثاني إلى t. تختار Vue I18n الصيغة المطابقة بناءً على العدد.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

قاعدة الجمع الافتراضية

عند وجود ثلاث صيغ، تكون القاعدة كالتالي: يستخدم 0 الصيغة الأولى، ويستخدم 1 الصيغة الثانية، وتستخدم أي قيمة أخرى الصيغة الثالثة. أما الصيغتان فتدمجان حالتي الصفر والأعداد الكثيرة.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

العنصر النائب {count}

داخل رسالة الجمع، يُملأ العنصر النائب الخاص {count} (أو {n}) بالعدد الذي مرّرتموه، حتى تتمكنوا من عرض القيمة.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

صيغ الجمع في القوالب

استخدموا في القوالب $t مع تمرير العدد باعتباره الوسيط الثاني، تمامًا كما في script.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

الجمع بين العدد والقيم المسمّاة

يمكنكم تمرير عدد وعناصر نائبة مسمّاة معًا، وذلك بتمرير العدد بالإضافة إلى كائن من القيم.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

ما هي الرسائل المرتبطة؟

قد تحتاج ترجمة ما أحيانًا إلى تضمين ترجمة أخرى لتجنب التكرار. تشير الرسائل المرتبطة إلى مفتاح آخر باستخدام الصيغة @:.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

حلّ رابط

عند ترجمة welcome، يُستبدل الرمز @:brand بالقيمة المترجمة لـ brand. غيّروا brand مرة واحدة، وستتحدث كل رسالة مرتبطة به.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

الربط باستخدام المفاتيح المتداخلة

تعمل الروابط مع المفاتيح المتداخلة ذات النقاط أيضًا. ضعوا المراجع متعددة الكلمات بين قوسين عند الحاجة.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

المعدّلات على الروابط

تدعم الرسائل المرتبطة معدّلات مثل @.upper لتحويل القيمة المرتبطة (إلى أحرف كبيرة أو صغيرة أو إلى صيغة تبدأ بحرف كبير).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

تحقق سريع

تحققوا من فهمكم لصيغ الجمع والروابط.

مراجعة

تعلّمتم صيغ الجمع وإعادة استخدام الرسائل:

افصلوا صيغ الجمع باستخدام |: "no items | one item | {count} items".
مرّروا عددًا إلى t(key, count) لاختيار الصيغة المناسبة.
يعرض العنصر النائب {count} العدد.
تعيد الرسائل المرتبطة استخدام مفتاح آخر عبر @:otherKey (واستخدموا @:(nested.key) للمفاتيح المتداخلة).
تحوّل معدّلات مثل @.upper القيمة المرتبطة.

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

هل درس «التعددية والرسائل المرتبطة» مجاني؟

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

ماذا ستتعلم في «التعددية والرسائل المرتبطة»؟

قواعد التعددية وبنية ‎@:key|@:key‎، والتعددية حسب count، والرسائل المرتبطة باستخدام ‎@:path‎ تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «التعددية والرسائل المرتبطة»؟

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

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

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

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

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