ES6从入门到精通：模板字符串

模板字符串的基本概念

ES6引入了模板字符串（Template Literals），使用反引号（`）包裹内容。与普通字符串相比，模板字符串支持多行文本、嵌入变量和表达式，无需手动拼接。

多行文本的支持

模板字符串直接保留换行符，无需使用\n或+拼接：

const multiLine = `第一行  
第二行  
第三行`;
console.log(multiLine); // 输出时会保留换行格式

嵌入变量与表达式

通过${}语法嵌入变量或表达式，内容会被自动计算并转为字符串：

const name = "Alice";
const age = 25;
const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, Alice! You are 25 years old."

// 支持表达式
const result = `The sum is ${2 + 3}.`;
console.log(result); // "The sum is 5."

标签模板（Tagged Templates）

模板字符串可以结合标签函数（Tag Function）使用，用于自定义字符串处理逻辑。标签函数接收两部分参数：字符串数组和嵌入的变量值。

function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        return `${result}${str}<mark>${values[i] || ''}</mark>`;
    }, '');
}

const name = "Bob";
const message = highlight`Hello, ${name}!`;
console.log(message); // "Hello, <mark>Bob</mark>!"

嵌套模板

模板字符串可以嵌套使用，适合复杂场景：

const isMember = true;
const discount = 10;
const total = `Your total is ${isMember ? `${100 - discount}` : '100'}.`;
console.log(total); // "Your total is 90."

注意事项

• 若需在模板字符串中使用反引号，需用\转义： `\ ``。
• 标签模板中的第一个参数（字符串数组）总比嵌入的变量多一个元素。
• 性能敏感场景中，避免过度嵌套或复杂表达式。

模板字符串极大地简化了字符串拼接的复杂度，是现代JavaScript开发的必备特性。