ภาพหน้าปก: ตอนที่ 14: Template Literals (เวทมนตร์แห่ง Backtick)

1. 🎯 ตอนที่ 14: Template Literals (เวทมนตร์แห่ง Backtick ที่จะทำให้คุณลืมเครื่องหมายบวก)

สวัสดีครับน้องๆ นักพัฒนาทุกคน! ชงกาแฟแก้วโปรดแล้วมานั่งพักฟังรุ่นพี่บ่นเรื่องสมัยก่อนกันสักนิดนึงครับ หลังจากที่เราผ่านเรื่องปวดหัวอย่าง Truthy/Falsy และการแปลง Type มาแล้ว วันนี้เราจะมาเรียนรู้ “เวทมนตร์” ตัวหนึ่งที่ถูกเพิ่มเข้ามาในมาตรฐาน ES6 (ปี 2015) ซึ่งพี่กล้าพูดเลยว่า มันเป็นหนึ่งในฟีเจอร์ที่ทำให้ชีวิตโปรแกรมเมอร์ JavaScript มีความสุขขึ้นแบบ 300% สิ่งนั้นก็คือ Template Literals ครับ!

2. 📖 เปิดฉาก (The Hook)

น้องๆ เคยเขียนโค้ดต่อข้อความ (String Concatenation) แบบนี้ไหมครับ?

สมมติว่าเรามีตัวแปร name กับ itemCount แล้วเราอยากพิมพ์ว่า “Hello John, you have 5 items in your cart.” ในอดีต เราต้องเขียนแบบนี้: var msg = "Hello " + name + ", you have " + itemCount + " items in your cart.";

ดูความยุ่งเหยิงนั่นสิครับ! เราต้องคอยเปิด/ปิดโควต (Quote) สลับกับการพิมพ์เครื่องหมายบวก (+) ไปมาเหมือนต่อเลโก้ที่ไม่ค่อยจะลงล็อก แถมบางทียังเผลอลืมเว้นวรรคจนข้อความติดกันเป็นพรืด (HelloJohn,you have5items) กลายเป็นฝันร้ายเวลาต้องมานั่งไล่หาบั๊กช่องว่างทีละตัว

แถมถ้าเราอยากจะให้ข้อความมันขึ้นบรรทัดใหม่ เราก็ต้องใช้ \n เข้ามาช่วย หรือไม่ก็ต้องพิมพ์เครื่องหมายบวกกันทุกบรรทัดเลยทีเดียว

แต่ฟ้าก็ประทานทางออกที่สวยงามมาให้เราครับ สิ่งนั้นคือ Backticks (`) หรือที่คนไทยชอบเรียกว่า “ปุ่มเปลี่ยนภาษา” นั่นเอง!

3. 🧠 แก่นวิชา (Core Concepts)

Template Literals (ในอดีตเคยถูกเรียกว่า Template Strings) คือรูปแบบการสร้างข้อความ (String) สไตล์ใหม่ที่ใช้เครื่องหมาย Backticks (...) มาล้อมรอบแทนการใช้ Single Quote (') หรือ Double Quote (") ครับ

การใช้ Backticks มอบพลังวิเศษให้เรา 2 อย่างหลักๆ คือ:

  1. String Interpolation (การแทรกตัวแปร/นิพจน์ลงในข้อความ): เราไม่จำเป็นต้องใช้เครื่องหมาย + เพื่อต่อข้อความอีกต่อไป เราสามารถ “เจาะรู” ข้อความแล้วเอาตัวแปรใส่เข้าไปได้เลย โดยใช้ไวยากรณ์ ${expression} ซึ่งข้างในวงเล็บปีกกานั้น เราสามารถใส่ตัวแปร, การคำนวณทางคณิตศาสตร์, หรือแม้แต่เรียกใช้ฟังก์ชัน (Function Call) ก็ได้ครับ!
  2. Multi-line Strings (ข้อความหลายบรรทัด): ถ้าเป็นเมื่อก่อน การจะพิมพ์ข้อความหลายบรรทัดต้องใช้ \n (Newline character) หรือ \ ต่อท้ายบรรทัด แต่ด้วย Template Literals เราแค่ “กดปุ่ม Enter” บนคีย์บอร์ด ระบบก็จะเคารพการขึ้นบรรทัดใหม่ของเราแบบเป๊ะๆ เหมือนที่เราพิมพ์ไว้ในโค้ดเลยครับ
แผนภาพเปรียบเทียบการต่อข้อความแบบเดิมด้วยเครื่องหมาย + กับการใช้ Template Literals แบบใหม่

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

เรามาดูการเปรียบเทียบเวทมนตร์บทเก่ากับบทใหม่กันชัดๆ ครับ:

// ข้อมูลตั้งต้น
const customerName = "Alice";
const price = 250;
const qty = 3;

// 🦖 1. ท่าเก่าสมัยยุคหิน (ES5 Concatenation)
const oldWay = "Receipt: \n" + 
               "Customer: " + customerName + "\n" + 
               "Total: " + (price * qty) + " THB";
console.log(oldWay);

// 🚀 2. ท่าใหม่สุดคูล (ES6 Template Literals)
const newWay = `Receipt: 
Customer: ${customerName}
Total: ${price * qty} THB`; // เราแทรกสมการคณิตศาสตร์ ${price * qty} เข้าไปได้เลย!
console.log(newWay);

// 🎁 3. ท่าประยุกต์: เรียกฟังก์ชันหรือใช้ Ternary Operator ก็ได้นะ
function getDiscount() { return 50; }

const message = `Hello ${customerName}, 
Your final price is ${ (price * qty) - getDiscount() } THB.
Status: ${qty > 2 ? 'Wholesale VIP' : 'Normal Customer'}`; // แทรกเงื่อนไข ? : ได้ด้วย
console.log(message);

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

ถึงแม้ Template Literals จะใช้งานง่ายและสะดวกมาก แต่ในฐานะ Senior Dev พี่ก็มีข้อพึงระวังและท่าไม้ตายระดับสูงมาฝากครับ:

  • ⚠️ ระวังกับดักช่องว่าง (The Whitespace Trap): ความซื่อสัตย์ของ Template Literals คือดาบสองคมครับ การที่คุณสามารถขึ้นบรรทัดใหม่ด้วยการกด Enter หมายความว่า “การเยื้องโค้ด (Indentation) ของคุณ ก็จะถูกนับเป็นข้อความ (Space) ด้วย” สมมติคุณเว้นวรรค Tab สวยงามเพื่อจัดหน้าโค้ด ข้อความในผลลัพธ์ก็จะติดเว้นวรรคยาวๆ ไปด้วย วิธีแก้แบบง่ายๆ คือการต่อท้ายด้วย .trim() เพื่อตัดช่องว่างหัวท้ายทิ้งครับ
  • 🪄 Tagged Templates (การแทรกแซงข้อความขั้นสูง): คุณรู้หรือไม่ว่าเราสามารถเอา “ชื่อฟังก์ชัน” ไปแปะไว้หน้า Backticks ได้? (เช่น html `
    …
    `) ท่านี้เรียกว่า Tagged Templates มันจะส่งข้อความที่ถูกหั่นเป็นชิ้นๆ เข้าไปในฟังก์ชันให้เราจัดการก่อนที่จะกลายเป็นข้อความสมบูรณ์ ท่านี้ถูกใช้เยอะมากในไลบรารีดังๆ อย่าง Styled-Components (ใน React) หรือ GraphQL (เช่น gql `query…`) เพื่อแปลงข้อความดิบให้เป็น Object ที่ซับซ้อนครับ
  • 🛡️ Raw Strings (String.raw): บางครั้งเราอยากพิมพ์เครื่องหมาย Backslash (\) โดยไม่อยากให้มันกลายเป็น Escape Character (เช่น ไม่อยากให้ \n กลายเป็นการขึ้นบรรทัดใหม่ แต่อยากให้เห็นคำว่า \n เลย) เราสามารถใช้ Built-in tag ที่ชื่อว่า String.raw `…` ได้ครับ มีประโยชน์มากเวลาทำระบบ Path ไฟล์ของ Windows หรือเขียน Regular Expression

6. 🏁 บทสรุป (To be continued…)

Template Literals ถือเป็น “ยาชูกำลัง” สำหรับโปรแกรมเมอร์ JavaScript ยุคใหม่จริงๆ ครับ มันทำให้โค้ดของเราสะอาดขึ้น อ่านง่ายขึ้นเหมือนภาษาคน และลดโอกาสการเกิดบั๊กเล็กๆ น้อยๆ จากการต่อ String ผิดพลาดได้อย่างชะงัด เพียงแค่จำไว้ว่า “ใช้ Backticks แล้วตามด้วย ${}” แค่นี้ก็จบปิ๊งครับ!

หลังจากที่เรามีกล่องเก็บข้อมูลที่ดี มีประเภทข้อมูลที่ชัดเจน และสามารถจัดระเบียบโครงสร้างข้อความและ Object ได้แล้ว ในตอนหน้า พี่จะพาไปดูอีกหนึ่งเวทมนตร์คู่บุญของ ES6 นั่นคือ Destructuring Assignment หรือการ “แกะกล่องข้อมูล” ขั้นเทพ ที่จะทำให้เราดึงค่าจาก Array และ Object ได้อย่างหล่อเท่ เตรียมตัวให้พร้อม แล้วเจอกันครับ!

ต้องการที่ปรึกษาและพัฒนาระบบ Automation หรือ Web Application ให้กับโรงงานของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและติดตั้งระบบแบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p