// วิธีเดิม — ต้องเชื่อมด้วย + และใส่ช่องว่างเอง
let name = "Sompong";
let greeting1 = "Hello, " + name + "!";

// Template Literal — แทรกค่าด้วย ${} ได้เลย
let greeting2 = `Hello, ${name}!`;

console.log(greeting1); // "Hello, Sompong!"
console.log(greeting2); // "Hello, Sompong!"

let price = 199;
let qty = 3;

// แทรกตัวแปร
console.log(`ราคา: ${price} บาท`);           // "ราคา: 199 บาท"

// แทรก expression (คำนวณใน ${} ได้เลย)
console.log(`รวม: ${price * qty} บาท`);       // "รวม: 597 บาท"

// แทรกหลายตัวแปรใน string เดียว
let orderId = "A-102";
console.log(`Order ${orderId}: ${price} x ${qty}`);
// "Order A-102: 199 x 3"

// วิธีเดิม — ต้องใส่ \n ด้วยตัวเอง
let old = "บรรทัดที่ 1\nบรรทัดที่ 2\nบรรทัดที่ 3";

// Template Literal — ขึ้นบรรทัดในโค้ดได้เลย
let modern = `บรรทัดที่ 1
บรรทัดที่ 2
บรรทัดที่ 3`;

// ใช้งานจริง: เขียนที่อยู่หลายบรรทัด
let customer = "Mali";
let address = `ส่งถึง: ${customer}
123 ถนนสุขุมวิท
กรุงเทพฯ 10110`;

console.log(address);
// ส่งถึง: Mali
// 123 ถนนสุขุมวิท
// กรุงเทพฯ 10110

// indent หน้าบรรทัดถูกเก็บเป็นส่วนหนึ่งของ string
let html = `
    <div>
        <h1>Title</h1>
    </div>
`;

console.log(html);
// 
    <div>
        <h1>Title</h1>
    </div>

// สังเกตว่ามีช่องว่างและ newline ต้น-ท้าย