قوالب JavaScript Template Literals

-

بنحكي في هذا الدرس عن Template literals والي هي عبارة عن طريقة لتعريف string باستخدام back-ticks (``) بدل من quotes ("")، هذه الامر يسمح لنا بإضافة سلاسل بأسطر متعددة multi-line strings،  يطلق على هذا النوع اسم قالب Template لأنه يستخدم بشكل شائع عند التعامل مع النصوص وعمل Interpolation للنصوص. 

تمام نحكي بالتفصيل 

أولا نحكي عن طريقة  Back-Tics Syntax

مثال : 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = `Layan lareen mlak`;
document.write( text);
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

عرفنا string داخل العلامات ‘   ’  وطبعنا النتيجة

ملاحظة: هذا Template literals غير مدعوم في Internet Explorer 

إضافة Quotes داخل string 

من فوائد استخدام Template literals هي إمكانية إضافة single and double quotes  داخل النص. 

مثال : 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = `Layan 'lareen "mlak`;
document.write( text);
document.write("<br>");
</script>
</body>
</html> 

النتيجة: 

اكيد دون استخدام Template literals لا يمكن إضافة single or double quotes داخل النص. 

يعني لو حاولت تكتب المثال السابق بالشكل التالي : 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan 'lareen "mlak";
document.write( text);
document.write("<br>");
</script>
</body>
</html> 

النتيجة خطأ اكيد 


إضافة Multi-line Strings (اسطر متعدده في النصوص)
يمكن من خلال استخدام Template literals إضافة اكثر من سطر داخل نفس النص. 
نطبق مثال : 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = `Layan 
            lareen 
            mlak`;
document.write( text);
document.write("<br>");
</script>
</body>
</html> 
النتيجة : 
العرض بكون سطر واحد لكن يمكن التحكم بطريقة كتابة الكود. 
نفس المثال السابق نحاول نعمل اكثر من سطر باستخدام " "
طبق الكود التالي : 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let text = "Layan 
            lareen 
            mlak";
document.write( text);
document.write("<br>");
</script>
</body>
</html> 
اكيد النتيجة خطأ 
في المستعرض بكون الخطأ 
ما هو Interpolation 
المقصود في هذا المصطلح هو اقحام او ادخل المتغيرات variables والتعبيرات expressions داخل النص.  بمعني ممكن إضافة متغيرات مختلفة تحتوي قيم، داخل نص معين.
تسمى هذه الطريقة string interpolation 
لتطبيق هذ المفهوم يجب استخدام الامر التالي :
${...}
مثال على ادخال المتغيرات Variable Substitutions 
الفكرة هون هو ادخال متغيرات معرفه بالصفحة، قد تكون تحتوي قيم معينه داخل نص. 
مثال: رسالة الترحيب ممكن نعرف متغير يحتوي على اسم المستخدم الحالي وبعدها عرض اسم المستخدم داخل النص. 
نشوف كيف نعمل هذا الكلام. 
طبق المثال التالي :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let FirstName="Layan";
let SecondName="Lareen";
document.write( `Welcome ${FirstName}, ${SecondName}!`);
document.write("<br>");
</script>
</body>
</html> 
النتيجة: 

يسمى الاستبدال التلقائي للمتغيرات variables بقيم حقيقية ب string interpolation.

مثال على Expression Substitution
الفكرة هون هو ادخال expressions داخل النص. 
مثال 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript String search Methods</h3>
<p id="Date"></p>
<script>
let price = 10;
let VAT = 0.15;
let TotalWithVat = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
document.write( TotalWithVat);
document.write("<br>");
</script>
</body>
</html> 
النتيجة :

عرفنا متغيرين الأول للسعر Price والثاني للضريبة VAT. وبعد هيك عرفنا متغير لحساب الإجمالي مع الضريبة باستخدام الامر
${(price * (1 + VAT))
وعملنا round بمقدار 2 للنتيجة باستخدام الكود 
toFixed(2)

ما هي HTML Templates
يمكن استخدام Template literals لعرض html tags وعرضها على شكل صفحة html 
طبق المثال التالي :

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Templates Literals</h3>
<p id="Date"></p>
<script>
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;
document.write( html);
document.write("<br>");
</script>
</body>
</html> 
النتيجة :