ما هي ال template literals؟

هذا السطر يتكلم عن Template Literals في JavaScript وهي طريقة حديثة لكتابة النصوص باستخدام `` (backticks) بدلا من علامات الاقتباس ' أو ".

الفكرة الأساسية أن ${} يسمح لك أن تضع كود JavaScript بداخل النص ويتنفذ ويتحول لنتيجة مثال :

let name = "Mohamed";
let age = 25;

let message = "My name is " + name + " and I am " + age + " years old";
console.log(message);

هنا نستخدم + حتى ندمج النصوص مع المتغيرات.

وإليك نفس المثال ولكن باستخدام ${} :

let name = "Mohamed";
let age = 25;

let message = `My name is ${name} and I am ${age} years old`;
console.log(message);

هنا:

• ${name}  : تم استبدالها بقيمة المتغير.
• ${age}  : نفس الفكرة.

وإليك المقال التالي لمزيد من التفاصيل :

بجانب ما تم توضيحه، فقالب النص في جافاسكريبت، لا يقتصر على المتغيرات فقط  بل أي تعبير expression، والتعبيرات في البرمجة تعني أي سطر برمجي يولد قيمة، بمعنى:

let a = 5, b = 3;
let result = `المجموع: ${a + b}`;               
let condition = `النتيجة: ${a > b ? "أكبر" : "أصغر"}`; 
let functionCall = `الاسم الكبير: ${name.toUpperCase()}`;

لاحظ المتغيرات سيتم تخزين قيمة بها نتيجة لما بعد =

أيضًا لو استخدمت "" أو '' فستحتاج إلى استخدام  n\ للكتابة على أسطر متعددة،  أو دمج الأسطر من خلال +  لكن مع Template Literals يمكنك كتابة النص كما هو:

let poem = `هذا سطر أول
وهذا سطر ثان
وسطر ثالث مع ${name}`;
console.log(poem);

وتستطيع تمرير القالب النصي كوسيط للدالة بمعنى قيمة للدالة، كالتالي:

function mark(strings, ...values) {
  return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '');
}
let price = 100;
let tagged = mark`السعر: ${price} دولار`;

console.log(tagged);

حيث معامل strings  في الدالة سيكون مصفوفة تحتوي على النصوص التي مررناها، وvalues...  باقي المعاملات وهي قيمة تعبير {price}$

من خلال الأمثلة التالية ستعرف أهمية هذه الميزة في جافاسكريبت.
أولاً يمكنك استدعاء دالة داخل النص كالتالي

let name = "ahmed";

console.log(`اسمك بالكابيتال: ${name.toUpperCase()}`);
// النتيجة: اسمك بالكابيتال: AHMED

أو يمكنك استخدام  كود HTML ديناميكي (الأكثر استخداماً)

let user = { name: "سارة", role: "Admin" };

let card = `
  <div class="card">
    <h2>${user.name}</h2>
    <p>الصلاحية: ${user.role}</p>
  </div>
`;