العودة إلى الدورة

السلاسل النصية الحديثة: Template Literals والاستيفاء (Interpolation) (ES6)

JavaScript: الدورة الكاملة للمبتدئين من 'الصفر إلى الاحتراف'

15. Template Literals (علامات الاقتباس المائلة)

Template Literals، التي تم تقديمها في ES6، يتم تعريفها باستخدام علامات الاقتباس المائلة (`) بدلاً من علامات الاقتباس العادية. إنها تحل مشكلتين رئيسيتين في السلاسل التقليدية.

1. استيفاء السلسلة (String Interpolation)

تسمح لك بتضمين المتغيرات والتعبيرات مباشرة داخل السلسلة باستخدام الصيغة ${expression}.

javascript let item = 'Laptop'; let price = 1200;

// Traditional concatenation: (الدمج التقليدي:) // let summary = 'The ' + item + ' costs $' + price + '.';

// Using Template Literals (much cleaner): (باستخدام Template Literals (أنظف بكثير):) let summary = The ${item} costs $${price * 1.05} (including tax).;

console.log(summary); // Output: The Laptop costs $1260 (including tax).

2. السلاسل متعددة الأسطر (Multi-line Strings)

تسمح لك Template Literals بتعريف سلسلة نصية عبر أسطر متعددة دون استخدام محارف السطر الجديد \n.

javascript let htmlContent = <div> <h1>Welcome!</h1> <p>This is a multi-line string.</p> </div>; console.log(htmlContent);

أفضل ممارسة: استخدم دائمًا Template Literals ما لم تكن بحاجة تحديدًا إلى علامات اقتباس مفردة أو مزدوجة.