Angular Academy · درس

الجمع وSelect ‏(ICU)

تعامل مع صيغ الجمع والنصوص المرتبطة بالجنس

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

لماذا لا تكفي العناصر النائبة العادية

تُعد العبارة "You have 1 messages" خاطئة في الإنجليزية. فلغات العالم تستخدم قواعد جمع مختلفة، وبعضها يملك عدة صيغ للجمع، كما تختلف الصياغة بحسب الجنس أو الفئة. يعالج Angular ذلك باستخدام ICU message format، وتحديدًا تعبيرَي plural وselect.

تعبير plural

يختار plural في ICU الصياغة بناءً على رقم. تسرد الحالات حسب فئة الجمع، وتوفر نصًا لكل حالة.

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

فئات الجمع

تشمل الفئات المطابقات الدقيقة (=0 و=1) وكلمات CLDR الأساسية: zero وone وtwo وfew وmany، إضافةً إلى other المطلوبة. وتستخدم الإعدادات المحلية المختلفة مجموعات فرعية مختلفة تلقائيًا.

العنصر النائب Hash

داخل حالة الجمع، يمثل # اختصارًا للرقم الذي تتم مطابقته، لذلك لا تحتاج إلى تكرار الارتباط.

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

تعبير select

يختار select النص بناءً على قيمة سلسلة نصية، وهو مناسب للفئات مثل الجنس أو الحالة أو النوع.

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

إن other إلزامي

يتطلب كل من plural وselect فرعًا باسم other. وهو الخيار الاحتياطي عند عدم تطابق أي حالة محددة، وسيُصدر Angular خطأً إذا كان مفقودًا.

الدمج مع النص المحيط

يمكن أن تظهر تعبيرات ICU داخل نص مترجم عادي. أبقِ الجملة كاملةً في كتلة i18n واحدة حتى يتحكم المترجمون في ترتيب الكلمات.

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

تضمين select داخل plural

يمكن تداخل تعبيرات ICU، مما يتيح التعبير عن الكمية والفئة معًا عندما تتطلب القواعد ذلك.

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

يضبط المترجمون الفئات

عند الترجمة، يمكن للإعداد المحلي إضافة صيغ الجمع التي تتطلبها قواعده، مثل استخدام الروسية للفئات one وfew وmany. ويحتوي هدف XLIFF لوحدة ICU على الفروع المترجمة محليًا.

ICU في TypeScript باستخدام $localize

تعمل صيغة ICU أيضًا داخل السلاسل النصية الموسومة بـ $localize، ولذلك تظل منطقية الجمع في شيفرة المكوّن قابلة للترجمة.

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

لماذا يتفوق ICU على if/else اليدوي

يفترض ترميز count === 1 ? 'message' : 'messages' وجود جمع ثنائي على النمط الإنجليزي. ويفوّض ICU القاعدة إلى بيانات CLDR الخاصة بكل إعداد محلي، فتُعرض اللغات التي تحتوي على ثلاث أو ست صيغ للجمع بصورة صحيحة من دون تغيير الشيفرة.

تحقق سريع

ما فرع ICU المطلوب دائمًا؟

مراجعة

يختار ICU plural النص حسب الرقم باستخدام الفئات (=0 وone وother)، مع استخدام # للعدد، بينما يختار select النص حسب قيمة سلسلة نصية. ويتطلب كلاهما فرع other، ويمكن تداخلهما بحرية، ويعملان في $localize، ويسمحان لكل إعداد محلي بتطبيق قواعد الجمع الخاصة به.

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

هل درس «الجمع وSelect ‏(ICU)» مجاني؟

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

ماذا ستتعلم في «الجمع وSelect ‏(ICU)»؟

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

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

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

كم من الوقت يستغرق درس «الجمع وSelect ‏(ICU)»؟

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

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

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

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

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