JavaScript Template Literals
คำพ้องความหมาย:
- เทมเพลต Literals
- สตริงเทมเพลต
- เทมเพลตสตริง
- ไวยากรณ์ Back-Tics
ไวยากรณ์ Back-Tics
Template Literalsใช้ back-tick (``) แทนเครื่องหมายคำพูด ("") เพื่อกำหนดสตริง:
ตัวอย่าง
let text = `Hello World!`;
Quotes Inside Strings
ด้วยตัวอักษรเทมเพลตคุณสามารถใช้ทั้งเครื่องหมายคำพูดเดี่ยวและคู่ภายในสตริง:
ตัวอย่าง
let text = `He's often called "Johnny"`;
สตริงหลายบรรทัด
เทมเพลตตัวอักษรช่วยให้สตริงหลายบรรทัด:
ตัวอย่าง
let text =
`The quick
brown fox
jumps over
the lazy dog`;
การแก้ไข
เทมเพลตเป็นวิธีที่ง่ายในการสอดแทรกตัวแปรและนิพจน์ลงในสตริง
วิธีการนี้เรียกว่าการแก้ไขสตริง
ไวยากรณ์คือ:
${...}
การแทนที่ตัวแปร
เทมเพลตตัวอักษรอนุญาตให้ตัวแปรในสตริง:
ตัวอย่าง
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
การแทนที่ตัวแปรด้วยค่าจริงโดยอัตโนมัติเรียกว่าการแก้ไขสตริง
การแทนที่นิพจน์
เทมเพลตลิเทอรัลอนุญาตนิพจน์ในสตริง:
ตัวอย่าง
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
การแทนที่นิพจน์ด้วยค่าจริงโดยอัตโนมัติเรียกว่าstring interpolation
เทมเพลต 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>`;
รองรับเบราว์เซอร์
Template Literals
เป็นคุณลักษณะ ES6 (JavaScript 2015)
ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด:
Chrome | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes |
Template Literals
ไม่รองรับใน Internet Explorer
อ้างอิงสตริงที่สมบูรณ์
สำหรับการอ้างอิงสตริงที่สมบูรณ์ ไปที่:
ทำการอ้างอิงสตริง JavaScriptให้สมบูรณ์
ข้อมูลอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของคุณสมบัติสตริงและวิธีการทั้งหมด