تعلم البرمجة - الفصل #28

الدرس الأول: التعرف على Template Strings في JavaScript

في عالم البرمجة بلغة JavaScript، تُعدّ السلاسل النصية (Strings) من العناصر الأساسية التي تُستخدم لتخزين البيانات النصية والتعامل معها. في هذا الدرس، سنتناول نوعًا خاصًا من السلاسل النصية يُعرف باسم Template Strings، والذي يُعدّ تطورًا مهمًا في طريقة كتابة النصوص داخل الكود، ويمنح المطورين مرونة أكبر في التعبير البرمجي.

✨ ما هي Template Strings؟

Template Strings هي نوع من السلاسل النصية يُكتب باستخدام علامة backtick (`) بدلًا من علامات الاقتباس المزدوجة " " أو المفردة ' '. هذه العلامة تُفتح وتُغلق بها السلسلة النصية، وتُتيح ميزات إضافية مثل التحويل الديناميكي للقيم (Interpolation) وكتابة النصوص متعددة الأسطر بسهولة.

مثال بسيط:

في هذا المثال، تم تعريف المتغير city باستخدام Template String بدلًا من الطريقة التقليدية.

🔍 الفرق بين علامات الاقتباس وBacktick

• " " و' ' تُستخدم لتعريف سلاسل نصية تقليدية.
• ` ` تُستخدم لتعريف Template Strings، وتُتيح ميزات إضافية.

⚠️ ملاحظة مهمة: علامة backtick ليست نفس علامة الاقتباس المفرد '. تأكد من استخدام العلامة الصحيحة عند كتابة Template Strings.

⌨️ كيف تجد علامة Backtick على لوحة المفاتيح؟

• في لوحة المفاتيح الأمريكية (US International)، توجد علامة backtick فوق زر Tab وإلى يسار الرقم 1.
• في لوحات مفاتيح أخرى مثل الفرنسية أو الهولندية، قد تختلف أماكنها. يُنصح بالبحث في الإنترنت باستخدام عبارة مثل: "How can I type a backtick using French keyboard?"

🧪 تجربتك الأولى مع Template Strings

لنبدأ بتجربة بسيطة:

هنا، استخدمنا Template String لتعريف اسم. لاحظ أن السلسلة تبدأ وتنتهي بعلامة backtick.

❓ أيهما أستخدم: علامات الاقتباس أم Backtick؟

في هذا الدرس، الهدف الأساسي هو أن تتعوّد على استخدام Template Strings. لاحقًا، ستتعلم متى يكون استخدام backtick هو الخيار الأفضل، خاصة عند الحاجة إلى إدراج متغيرات داخل النص أو كتابة نصوص متعددة الأسطر.

📌 خلاصة الدرس

• يمكن تعريف السلاسل النصية باستخدام علامة backtick: ` `.
• السلاسل النصية التي تُكتب بهذه الطريقة تُسمى Template Strings.
• مثال على ذلك: let name = `Sam`;
• تأكد من إغلاق السلسلة بنفس نوع العلامة التي بدأت بها.

الدرس الثاني: Interpolation — إدراج المتغيرات داخل السلاسل النصية

في هذا الدرس، سنتعرف على تقنية مهمة في JavaScript تُدعى Interpolation، وهي طريقة أنيقة وفعالة لإدراج المتغيرات أو التعبيرات داخل السلاسل النصية. هذه التقنية تُعدّ بديلًا أكثر وضوحًا وسهولة من الطريقة التقليدية المعروفة باسم Concatenation (الربط اليدوي للنصوص).

💡 ما المقصود بـ Interpolation؟

الـ Interpolation تعني ببساطة إدراج قيمة متغير أو تعبير داخل سلسلة نصية. النتيجة النهائية تكون سلسلة تحتوي على القيمة الفعلية للمتغير، وليس اسمه فقط.

مثال توضيحي:

في هذا المثال، تم إدراج المتغير name داخل السلسلة النصية باستخدام ${}، مما أدى إلى ظهور القيمة "Alex" داخل النص.

🔄 الفرق بين Interpolation وConcatenation

الطريقة التقليدية لدمج النصوص والمتغيرات هي باستخدام علامة +:

لكن باستخدام Interpolation، تصبح الصياغة أكثر بساطة وأناقة:

وهذا يُسهل التعامل مع المسافات، الفواصل، والتنسيقات المعقدة.

🧠 خطوات كتابة Interpolation بشكل صحيح

لكي تعمل Interpolation بنجاح، يجب اتباع خطوتين أساسيتين:

1. ✅ استخدام Template String، أي كتابة السلسلة النصية باستخدام علامة backtick ` وليس علامات الاقتباس " ".
2. ✅ إدراج المتغير داخل الصيغة ${variable}.

مثال أكثر تقدمًا:

لاحظ كيف تم إدراج فاصلة ومسافة بسهولة بين الاسمين.

⚠️ الأخطاء الشائعة

من أكثر الأخطاء التي يقع فيها المبرمجون المبتدئون:

• ❌ استخدام علامات الاقتباس بدلًا من backtick:

• ❌ نسيان استخدام ${} حول اسم المتغير:

في كلا الحالتين، لن يتم تفسير name كمتغير، بل كنص حرفي.

🔁 أيهما أفضل: Interpolation أم Concatenation؟

كلا الطريقتين تؤديان نفس الغرض، ويمكنك استخدام ما يناسبك. لكن:

• Interpolation أكثر أناقة ووضوحًا، خاصة عند التعامل مع عدة متغيرات.
• Concatenation قد تكون مفيدة في حالات بسيطة أو عند التعامل مع سلاسل نصية ثابتة.

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

📌 خلاصة الدرس

• Interpolation هي إدراج المتغيرات أو التعبيرات داخل سلسلة نصية.
• تتطلب استخدام Template String (علامة backtick) وكتابة المتغير داخل ${}.
• تُعدّ أكثر أناقة من الربط اليدوي باستخدام +.
• تجنب الأخطاء الشائعة مثل استخدام علامات الاقتباس أو نسيان ${}.

ملخص الفصل 

• يمكن تعريف السلاسل النصية باستخدام علامة backtick: `
• السلاسل النصية المكتوبة بعلامة backtick تُسمى Template Strings
• مثال: let name = \Sam``
• Interpolation تعني إدراج متغيرات أو تعبيرات داخل سلسلة نصية
• النتيجة النهائية تكون سلسلة تحتوي على القيم الفعلية للمتغيرات أو التعبيرات
• خطوات كتابة Interpolation: يجب أن تكون السلسلة النصية مكتوبة باستخدام backtickيجب لف المتغير داخل ${}
• يجب أن تكون السلسلة النصية مكتوبة باستخدام backtick
• يجب لف المتغير داخل ${}
• Interpolation أكثر أناقة في معظم الحالات
• يمكن استخدام Concatenation بدلًا منها، حسب الحاجة
• كلا الطريقتين صحيحتين، والاختيار بينهما يعتمد على التفضيل الشخصي

التحديات

🧩 التحدي 1: تحويل إلى Template String

لديك الكود التالي باستخدام concatenation:

🎯 المطلوب: أعد كتابة الكود باستخدام Template String وInterpolation بدلًا من concatenation.

🧩 التحدي 2: رسالة متعددة المتغيرات

لديك المتغيرات التالية:

🎯 المطلوب: أنشئ رسالة باستخدام Template String تحتوي على الاسم الكامل والعمر، مثل: Hello Omar Salem, you are 30 years old.

🧩 التحدي 3: اكتشاف الخطأ

راجع الكود التالي:

🎯 المطلوب:

• ما الخطأ في هذا الكود؟
• صحّح الخطأ ليعمل Interpolation بشكل صحيح.