0Pricing
React Academy · درس

الجمع والاستيفاء

تعامل مع صيغ الجمع المستندة إلى العدد وأدرج القيم الديناميكية داخل النصوص المترجمة.

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

مرحبًا

في هذا الدرس ستتعاملون مع صيغ الجمع المعتمدة على العدد، وتدرجون قيمًا ديناميكية داخل السلاسل المترجمة باستخدام الاستيفاء ودعم الجمع في i18next.

أساسيات الاستيفاء

استخدموا قوسين معقوفين مزدوجين داخل سلاسل الترجمة كعناصر نائبة. مرّروا كائنًا يحتوي على قيم المتغيرات باعتباره الوسيط الثاني إلى t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

متغيرات استيفاء متعددة

يمكنكم استخدام العدد الذي تحتاجون إليه من متغيرات الاستيفاء داخل سلسلة واحدة.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

تهريب HTML

افتراضيًا، يتهرّب i18next من محارف HTML الموجودة في القيم المستوفاة. لعرض HTML داخل قيمة مستوفاة، اضبطوا `escapeValue: false` في إعدادات التهيئة، وهذا آمن أصلًا في React لأن React يتهرّب من JSX.

صيغ الجمع

يدعم i18next صيغ الجمع تلقائيًا. عرّفوا `key` للمفرد و`key_other` أو `key_plural` للجمع. مرّروا `count` داخل كائن الاستيفاء.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

قواعد الجمع الخاصة بكل لغة

تختلف قواعد الجمع من لغة إلى أخرى. فللروسية 4 صيغ جمع، وللعربية 6 صيغ. يستخدم i18next قواعد Unicode CLDR لكل لغة تلقائيًا. عرّفوا جميع الصيغ المطلوبة في ملف الترجمة.
// Russian (ru):
// key_one, key_few, key_many, key_other

صيغة الصفر

يدعم i18next أيضًا صيغة خاصة هي `key_zero` عندما تكون قيمة count تساوي 0، ما يتيح استخدام صياغة مختلفة، مثل 'لا توجد عناصر' بدلًا من '0 عناصر'.
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

المفاتيح المتداخلة مع صيغ الجمع

يمكنكم وضع مفاتيح الجمع داخل كائنات متداخلة. استخدموا صيغة النقاط للوصول إليها، تمامًا كما تفعلون مع المفاتيح المتداخلة العادية.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

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

يتكامل i18next مع واجهة Intl API لتنسيق التواريخ والأرقام بما يتوافق مع الإعداد المحلي. استخدموا i18n.format() أو إضافة intlify لتنسيق التواريخ ضمن الترجمات.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

الترجمات حسب السياق

استخدموا الخيار `context` للصيغ المختلفة نحويًا بحسب السياق، مثل الكلمات التي تختلف حسب الجنس. عرّفوا البديلين `key_male` و`key_female` في ملف الترجمة.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

تحقّق سريع

كيف تمرّرون قيمة ديناميكية باسم 'username' إلى سلسلة ترجمة باستخدام i18next؟

مراجعة

استخدموا {{variable}} للاستيفاء، وkey_other/key_one لصيغ الجمع، وkey_zero لصيغة الصفر. يطبّق i18next قواعد جمع Unicode CLDR تلقائيًا لكل لغة. استخدموا السياق للصيغ النحوية المختلفة.

التالي

الدرس التالي: **مبدّل اللغة والتحميل الكسول للترجمات** — ستنشئون مبدّلًا للغة، وستحمّلون حِزم الترجمة عند الطلب.

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

هل درس «الجمع والاستيفاء» مجاني؟

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

ماذا ستتعلم في «الجمع والاستيفاء»؟

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

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

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

كم من الوقت يستغرق درس «الجمع والاستيفاء»؟

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

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

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

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

  1. إعداد react-i18next
  2. استخدام useTranslation Hook
  3. الجمع والاستيفاء
  4. مبدّل اللغة والتحميل الكسول للترجمات
← العودة إلى React Academy