Template literals คืออะไร?

Question

Accepted Answer

**Template literals** ใช้เครื่องหมาย backtick (`` ` ``) และเพิ่มสิ่งสองอย่างที่เครื่องหมายคำพูดสตริงธรรมดาไม่มี: **การแทรกค่า** ของนิพจน์และสตริง**หลายบรรทัด** ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

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