คำพ้องความหมาย:
ตัวอักษรเทมเพลต
สตริงเทมเพลต
เทมเพลตสตริง
ไวยากรณ์ Back-Tics
ตัวอักษรเทมเพลต ใช้เครื่องหมายย้อนกลับ (``) แทนเครื่องหมายคำพูด ("") เพื่อกำหนดสตริง:
let text = `Hello World!`;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals use back-ticks (``) to define a string:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
ด้วย แม่แบบตัวอักษร คุณสามารถใช้ทั้งเครื่องหมายคำพูดเดี่ยวและคู่ภายในสตริง:
let text = `He's often called "Johnny"`;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>With back-ticks, you can use both single and double quotes inside a string:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
ตัวอักษรเทมเพลต อนุญาตให้ใช้สตริงหลายบรรทัด:
let text =
`The quick
brown fox
jumps over
the lazy dog`;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows multiline strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let text =
`The quick
brown fox
jumps over
the lazy dog`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
ตัวอักษรเทมเพลตเป็นวิธีง่ายๆ ในการประมาณค่าตัวแปรและนิพจน์ลงในสตริง
วิธีการนี้เรียกว่าการแก้ไขสตริง
ไวยากรณ์คือ:
${...}ตัวอักษรเทมเพลต อนุญาตให้ใช้ตัวแปรในสตริง:
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows variables in strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
การแทนที่ตัวแปรด้วยค่าจริงโดยอัตโนมัติเรียกว่า การแก้ไขสตริง
ตัวอักษรเทมเพลต อนุญาตการแสดงออกในสตริง:
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows variables in strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
document.getElementById("demo").innerHTML = total;
</script>
</body>
</html>
การแทนที่นิพจน์ด้วยค่าจริงโดยอัตโนมัติเรียกว่า การแก้ไขสตริง
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>`;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows variables in strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</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.getElementById("demo").innerHTML = html;
</script>
</body>
</html>
Template Literals เป็นคุณลักษณะ ES6 (JavaScript 2015)
รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Template Literals ไม่ได้รับการสนับสนุนใน Internet Explorer
สำหรับการอ้างอิงสตริงที่สมบูรณ์ โปรดไปที่:
อ้างอิงสตริง JavaScript ที่สมบูรณ์
การอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของคุณสมบัติสตริงและวิธีการทั้งหมด