Formatted Strings ด้วย Template Strings ใน JavaScript

ตัวอย่างโค้ด

ตัวอย่างต่อไปนี้แสดงการใช้ template strings (backticks) สำหรับ formatted strings:

<!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, .sample { font-size: 20px; font-weight: 500; color: blueviolet; }
    .sample { color: red; }
  </style> 
</head> 
<body> 
  <h1>Formatted Strings Using Template Strings JavaScript</h1> 
  <div class="sample"> `The person name is ${personObj.name}. His age and rollno are ${personObj.age} and ${personObj.rollno} respectively` </div> 
  <div class="result"></div> 
  <br /> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อดู template string ที่จัดรูปแบบด้วยค่า personObj</h3> 
  <script> 
    let BtnEle = document.querySelector(".Btn"); 
    let resEle = document.querySelector(".result"); 
    let personObj = { name: "Rohan Sharma", age: 12, rollno: 22 }; 
    let arr = [22, 55, 11, 19, 55]; 
    BtnEle.addEventListener("click", (event) => { 
      resEle.innerHTML = `The person name is ${personObj.name}. His age and rollno are ${personObj.age} and ${personObj.rollno} respectively`; 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกปุ่ม 'CLICK HERE':

คำอธิบาย

Template strings (ใช้ backticks ` `) ช่วยให้สามารถแทรกตัวแปรหรือ expression ลงใน string ได้โดยตรงด้วย syntax ${expression} ทำให้โค้ดอ่านง่ายกว่าการ concatenate ด้วย +