从历史上看，JavaScript 中的字符串功能有限，缺少人们对 Python 或 Ruby 等语言的预期功能。ES6 模板字符串（在 Chrome 41 及更高版本中提供）从根本上改变了这一点。它们引入了一种使用领域特定语言 (DSL) 定义字符串的方法，从而带来了更好的：
- 字符串插值
- 嵌入式表达式
- 无需使用黑客技巧即可处理多行字符串
- 字符串格式设置
- 字符串标记，用于安全地转义 HTML、本地化等。
模板字符串引入了一种完全不同的解决这些问题的方法，而不是像我们现在所知的那样，将另一项功能塞入字符串中。
语法
模板字符串使用反引号 (``)，而不是我们通常用于普通字符串的单引号或双引号。因此，模板字符串可以写成如下形式：
var greeting = `Yo World!`;
到目前为止，模板字符串并没有比普通字符串提供更多功能。让我们来改变这一点。
字符串替换
它们带来的第一个实用好处是字符串替换。通过替换，我们可以使用任何有效的 JavaScript 表达式（例如变量相加），并且在模板字面量中，结果将作为同一字符串的一部分输出。
模板字符串可以包含使用 ${ } 语法进行字符串替换的占位符，如下所示：
// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);
// => "Yo, Brendan!"
由于模板字符串中的所有字符串替换都是 JavaScript 表达式，因此我们可以替换的不仅仅是变量名称。例如，在下面，我们可以使用表达式插值来嵌入一些可读的内嵌数学公式：
var a = 10;
var b = 10;
console.log(`JavaScript first appeared ${a+b} years ago. Wow!`);
//=> JavaScript first appeared 20 years ago. Wow!
console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.
它们对于表达式中的函数也非常有用：
function fn() { return "I am a result. Rarr"; }
console.log(`foo ${fn()} bar`);
//=> foo I am a result. Rarr bar.
${} 适用于任何类型的表达式，包括成员表达式和方法调用：
var user = {name: 'Caitlin Potter'};
console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);
// => "Thanks for getting this into V8, CAITLIN POTTER";
// And another example
var thing = 'template strings';
console.log(`Say hello to ${thing}.`);
// => Say hello to template strings
如果您需要在字符串中使用反引号，可以使用反斜杠字符 \ 对其进行转义，如下所示：
var greeting = `\`Yo\` World!`;
多行字符串
在 JavaScript 中处理多行字符串一段时间以来一直需要使用一些不太妥当的权宜解决方法。目前的解决方案要求字符串位于单行中，或者在每行换行符之前使用 \（反斜线）将字符串拆分为多行字符串。例如：
var greeting = "Yo \
World";
虽然这在大多数现代 JavaScript 引擎中应该都能正常运行，但行为本身仍然有点像是黑客行为。您还可以使用字符串串联来模拟多行支持，但这同样存在一些缺点：
var greeting = "Yo " +
"World";
模板字符串可以显著简化多行字符串。只需在需要的地方添加换行符，即可轻松解决问题。示例如下：
反引号语法中的任何空格也会被视为字符串的一部分。
console.log(`string text line 1
string text line 2`);
带标记的模板
到目前为止，我们已经介绍了如何使用模板字符串进行字符串替换以及创建多行字符串。它们带来的另一项强大功能是带标记的模板。标记模板通过在模板字符串前面放置函数名称来转换模板字符串。例如：
fn`Hello ${you}! You're looking ${adjective} today!`
带标记的模板字符串的语义与普通模板字符串的语义截然不同。从本质上讲，它们是一种特殊类型的函数调用：上述“脱糖”会转换为
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
请注意，第 (n + 1) 个实参与字符串数组中第 n 个条目和第 (n + 1) 个条目之间的替换方式。这对各种用途都很有用，但最简单的用途之一就是自动转义任何插值变量。
例如，您可以编写一个 HTML 转义函数，以便...
html`<p title="${title}">Hello ${you}!</p>`
返回替换了适当变量的字符串，但所有不安全的 HTML 字符均已替换。我们来试试。我们的 HTML 转义函数将接受两个参数：用户名和评论。这两者都可能包含 HTML 不安全字符（即 '、"、<、> 和 &）。例如，如果用户名为“Domenic Denicola”，评论为“& is a fun tag”，我们应输出：
<b>Domenic Denicola says:</b> "& is a fun tag"
因此，我们的带标记模板解决方案可以写成如下形式：
// HTML Escape helper utility
var util = (function () {
// Thanks to Andrea Giammarchi
var
reEscape = /[&<>'"]/g,
reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
oEscape = {
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
},
oUnescape = {
'&': '&',
'&': '&',
'<': '<',
'<': '<',
'>': '>',
'>': '>',
''': "'",
''': "'",
'"': '"',
'"': '"'
},
fnEscape = function (m) {
return oEscape[m];
},
fnUnescape = function (m) {
return oUnescape[m];
},
replace = String.prototype.replace
;
return (Object.freeze || Object)({
escape: function escape(s) {
return replace.call(s, reEscape, fnEscape);
},
unescape: function unescape(s) {
return replace.call(s, reUnescape, fnUnescape);
}
});
}());
// Tagged template function
function html(pieces) {
var result = pieces[0];
var substitutions = [].slice.call(arguments, 1);
for (var i = 0; i < substitutions.length; ++i) {
result += util.escape(substitutions[i]) + pieces[i + 1];
}
return result;
}
var username = "Domenic Denicola";
var tag = "& is a fun tag";
console.log(html`<b>${username} says</b>: "${tag}"`);
//=> <b>Domenic Denicola says</b>: "& is a fun tag"
其他可能的用途包括自动转义、格式设置、本地化，以及通常更复杂的替换：
// Contextual auto-escaping
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${message}')" style="color: ${color}">${message}</a>`;
// Localization and formatting
l10n`Hello ${name}; you are visitor number ${visitor}:n! You have ${money}:c in your account!`
// Embedded HTML/XML
jsx`<a href="${url}">${text}</a>` // becomes React.DOM.a({ href: url }, text)
// DSLs for code execution
var childProcess = sh`ps ax | grep ${pid}`;
摘要
模板字符串适用于 Chrome 41 Beta 版及更高版本、IE 技术预览版、Firefox 35 及更高版本和 io.js。实际上，如果您想在生产环境中使用它们，主要的 ES6 转译器（包括 Traceur 和 6to5）都支持它们。如果您想试用模板字符串，请参阅 Chrome 示例代码库中的模板字符串示例。您可能还对 ES5 中的 ES6 等效项感兴趣，该文档演示了如何使用 ES5 实现模板字符串带来的一些糖果语法。
模板字符串为 JavaScript 带来了许多重要功能。这些改进包括更好地实现字符串和表达式插值、多行字符串，以及能够创建自己的 DSL。
它们带来的最重要的功能之一是标记模板，这是编写此类 DSL 的关键功能。它们会接收模板字符串的各个部分作为参数，然后您可以决定如何使用字符串和替换项来确定字符串的最终输出。