टेम्प्लेट लिटरल्स हमें टैग किए गए टेम्प्लेट लिटरल्स बनाने की भी अनुमति देते हैं। टैग किया गया शाब्दिक एक फ़ंक्शन परिभाषा की तरह है और हमें टेम्पलेट शाब्दिक पार्स करने की अनुमति देता है। टैग किए गए शाब्दिक में कोष्ठक नहीं होता है और टैग फ़ंक्शन को पहले तर्क के रूप में स्ट्रिंग मानों की सरणी मिलती है। बाकी तर्क तब अन्य संबंधित मापदंडों को पारित कर दिए जाते हैं।
जावास्क्रिप्ट में टैग किए गए टेम्पलेट अक्षर को लागू करने के लिए कोड निम्नलिखित है -
उदाहरण
<!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>Tagged Template Literals in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to pass the template string using tagged template literal to sampleTag() function</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> आउटपुट
'यहां क्लिक करें' बटन पर क्लिक करने पर -
