在 ES6 中，模板字符串是新增的一种字符串类型，它能够更加方便地处理文本，尤其适用于前端开发中拼接 HTML 代码和 SQL 语句等。本文将详细讲解模板字符串的使用，帮助读者更好地理解和应用这一新特性。
基本用法
模板字符串使用反引号 ``（也叫 backticks）括起来，支持多行字符串和插值表达式。插值表达式使用 ${} 括起来，可以在其中嵌入任意 JavaScript 表达式，例如：
const name = "张三";
const age = 18;
const message = `你好，我叫${name}，我今年${age}岁了。`;
console.log(message);
// 输出：你好，我叫张三，我今年18岁了。注意，插值表达式中可以使用任意表达式，包括函数调用、对象方法调用等。
const arr = [1, 2, 3];
const message = `arr 中有${arr.length}个元素，分别是${arr.join(', ')}。`;
console.log(message);
// 输出：arr 中有3个元素，分别是1, 2, 3。多行字符串
传统的 JavaScript 字符串无法跨行，需要使用 \n 转义符来表示换行符。而模板字符串则不需要这样，可以直接换行，例如：
const longText = ` 这是一段比较长的文本 它跨越了多行 但只需要用一组 \`\` 包起来就可以了 `; console.log(longText);
嵌套模板字符串
模板字符串可以嵌套使用，例如：
const message1 = `这是外层模板字符串`;
const message2 = `
${message1}，
它嵌套了内层模板字符串，
外层的插值表达式是${2 + 2}，
而内层的插值表达式是${`${1 + 1}` + `${2 + 2}`}
`;
console.log(message2);标签模板
模板字符串还支持标签模板的语法，即在模板字符串前面加上一个函数名。标签模板可以自定义模板字符串的解析过程，使其更加灵活。
-- -------------------- ---- ------- -------- -------------- ---------- - --------------------- -- ------- ---- -------------------- -- ------ --- ----- ---- - ---------- ----- --- - ---------- ------ --------------------- - ----- ---- - ----- ----- --- - --- ----- ------- - ------------------- --------------------- -- ------------
在上面的例子中，myTag 函数接收到两个参数：
strings: 一个字符串数组，包含模板字符串中所有的静态字符串（即插值表达式之间的部分）。...values: 一个数组，包含模板字符串中所有的动态值（即插值表达式内部的表达式计算结果）。
myTag 函数可以根据这两个参数进行特殊的处理，返回最终的文本。
特殊字符转义
在模板字符串中，如果要插入 ${} 或者反引号本身，需要使用反斜杠将它们转义。例如：
const message = `这是一个反引号：\``; console.log(message); // 输出：这是一个反引号：`。 const code = `const message = \`hello, world!\`\nconsole.log(message);`; console.log(code); // 输出：const message = `hello, world!` // console.log(message);
总结
模板字符串是 ES6 中比较实用的一个新特性，可以更加方便地进行字符串拼接。除了上述基本用法，还可以结合标签模板自定义字符串解析过程，实现更高级的文本处理。通过本文的介绍，相信读者已经对模板字符串有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5b3b8d20074f47a47e75a