Computer >> Máy Tính >  >> Lập trình >> Javascript

Các chữ mẫu được gắn thẻ trong JavaScript

Các ký tự mẫu cũng cho phép chúng tôi tạo các ký tự mẫu được gắn thẻ. Chữ được gắn thẻ giống như một định nghĩa hàm và cho phép chúng ta phân tích cú pháp các chữ mẫu. Chữ được gắn thẻ không chứa dấu ngoặc và hàm thẻ nhận mảng giá trị chuỗi làm đối số đầu tiên. Các đối số còn lại sau đó được chuyển cho các tham số liên quan khác.

Sau đây là mã để triển khai các ký tự mẫu được gắn thẻ trong JavaScript -

Ví dụ

<!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>

Đầu ra

Các chữ mẫu được gắn thẻ trong JavaScript

Khi nhấp vào nút 'BẤM VÀO ĐÂY' -

Các chữ mẫu được gắn thẻ trong JavaScript