ما هي template literals؟

Question

Accepted Answer

تستخدم **Template literals** علامات backticks (`` ` ``) وتضيف شيئين لا تملكهما علامات الاقتباس العادية: **interpolation** للتعبيرات و**multi-line** strings. ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` قبل template literals كان عليك أن تكتب `"Hi " + name + ", " + count + ...` — طويل وعرضة للأخطاء. تقرأ interpolation بشكل أفضل بكثير. ## Tagged templates (advanced) دالة موضوعة قبل علامات backticks تستقبل أجزاء السلسلة والقيم المدرجة، مما يسمح لها بمعالجتها: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` هذا يدعم مكتبات مثل **styled-components** ومساعدات escaping آمنة لـ SQL/HTML. ## لماذا يهم الأمر Template literals هي الطريقة القياسية لبناء السلاسل اليوم — interpolation قابلة للقراءة، نصوص multi-line سهلة، وخطاف (tagged templates) لـ DSLs.