let name = "Alice";
let age = 25;

// 传统拼接
let old = "我是 " + name + "，今年 " + age + " 岁。";

// 模板字面量
let modern = `我是 ${name}，今年 ${age} 岁。`;

// 任意表达式
console.log(`1 + 2 = ${1 + 2}`);             // "1 + 2 = 3"
console.log(`是否成年：${age >= 18 ? "是" : "否"}`); // "是否成年：是"
console.log(`大写：${name.toUpperCase()}`);   // "大写：ALICE"

// 函数调用
function getPrice() { return 99; }
console.log(`价格：${getPrice()} 元`);       // "价格：99 元"

// 传统方式需要 \n
let old = "第一行\n第二行\n第三行";

// 模板字面量直接换行
let modern = `
    第一行
    第二行
    第三行
`;

// 实际应用：HTML 模板
let html = `
<div class="card">
    <h2>${name}</h2>
    <p>年龄：${age}</p>
</div>
`;

let users = ["Alice", "Bob", "Charlie"];

let list = `
<ul>
    ${users.map(name => `<li>${name}</li>`).join("")}
</ul>
`;
console.log(list);
// <ul>
//     <li>Alice</li><li>Bob</li><li>Charlie</li>
// </ul>

// 高亮标签
function highlight(strings, ...values) {
    let result = "";
    strings.forEach((str, i) => {
        result += str;
        if (i < values.length) {
            result += `<mark>${values[i]}</mark>`;
        }
    });
    return result;
}

let keyword = "JavaScript";
console.log(highlight`学习 ${keyword} 模板标签`);
// "学习 <mark>JavaScript</mark> 模板标签"

// 安全转义（防 XSS）
function safeHtml(strings, ...values) {
    let result = "";
    strings.forEach((str, i) => {
        result += str;
        if (i < values.length) {
            result += String(values[i])
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;");
        }
    });
    return result;
}

// String.raw 保持转义字符原样
console.log(`Line1\nLine2`);
// Line1
// Line2

console.log(String.raw`Line1\nLine2`); // "Line1\\nLine2"

// 路径不转义
let path = String.raw`C:\Users\name\docs`;
console.log(path); // C:\Users\name\docs