জাভাস্ক্রিপ্টে ট্যাগড টেমপ্লেট লিটারেল

টেমপ্লেট লিটারেল ট্যাগড টেমপ্লেট লিটারেল তৈরি করার সুযোগ দেয়। ট্যাগড লিটারেল ফাংশন ডেফিনিশনের মতো কাজ করে এবং টেমপ্লেট লিটারেল পার্স করতে সাহায্য করে। ট্যাগড লিটেরেলে প্যারেনথেসিস থাকে না এবং ট্যাগ ফাংশনকে প্রথম আর্গুমেন্ট হিসেবে স্ট্রিং ভ্যালুর অ্যারে পাওয়া যায়। বাকি আর্গুমেন্টগুলো সংশ্লিষ্ট প্যারামিটারগুলোতে পাস হয়।

নিচে জাভাস্ক্রিপ্টে ট্যাগড টেমপ্লেট লিটারেল বাস্তবায়নের কোড দেওয়া হলো:

উদাহরণ

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 20px;       font-weight: 500;       color: blueviolet;    } </style> </head> <body> <h1>জাভাস্ক্রিপ্টে ট্যাগড টেমপ্লেট লিটারেল</h1> <div class="result"></div> <br /> <button class="Btn">এখানে ক্লিক করুন</button> <h3>উপরোক্ত বাটনে ক্লিক করে টেমপ্লেট স্ট্রিং ট্যাগড টেমপ্লেট লিটারেল দিয়ে sampleTag() ফাংশনে পাস করুন</h3> <script>    let resEle = document.querySelector(".result");    let BtnEle = document.querySelector(".Btn");    function sampleTag(strings, name, age, rollNo) {       let section;       if (rollNo > 50) {          section = "A";       } else {          section = "B";       }       return `${name} roll no: ${rollNo} age :${age} is in section ${section}`;    }    let name = "Rohan",    age = 16,    rollNo = 22;    BtnEle.addEventListener("click", () => {       resEle.innerHTML = sampleTag`${name} aged ${age} and roll no ${rollNo} is new in       the school`;    }); </script> </body> </html>

আউটপুট

‘এখানে ক্লিক করুন’ বাটনে ক্লিক করলে –