Template literals ใช้เครื่องหมาย backtick (`) และเพิ่มสิ่งสองอย่างที่เครื่องหมายคำพูดสตริงธรรมดาไม่มี: การแทรกค่า ของนิพจน์และสตริงหลายบรรทัด
js
name = ;
count = ;
msg = ;
total = ;
html = ;
Template literals ใช้เครื่องหมาย backtick (`) และเพิ่มสิ่งสองอย่างที่เครื่องหมายคำพูดสตริงธรรมดาไม่มี: การแทรกค่า ของนิพจน์และสตริงหลายบรรทัด
name = ;
count = ;
msg = ;
total = ;
html = ;
ก่อน template literals คุณจะเขียน "Hi " + name + ", " + count + ... — ยาวและเสี่ยงต่อข้อผิดพลาด การแทรกค่าอ่านได้ดีกว่ามาก
ฟังก์ชันที่วางไว้ด้านหน้า backtick รับส่วนต่างๆ ของสตริงและค่าที่แทรกเข้ามา ซึ่งช่วยให้สามารถประมวลผลได้:
function highlight(strings, ...values) {
return strings.reduce((out, s, i) =>
out + s + (values[i] ? `<b>${values[i]}</b>` : ""), "");
}
highlight`Hello ${name}!`; // "Hello <b>Ann</b>!"
สิ่งนี้ขับเคลื่อนไลบรารีเช่น styled-components และตัวช่วยในการหลบหนีประเภท SQL/HTML ที่ปลอดภัย
Template literals เป็นวิธีมาตรฐานในการสร้างสตริงในปัจจุบัน — การแทรกค่าที่อ่านได้ง่าย ข้อความหลายบรรทัดที่ง่าย และตัวเชื่อม (tagged templates) สำหรับ DSL