ECMAScript 2016 引入了字符串模板的概念，它提供了一种方便、易读和安全的方式来构建字符串。本文将详细解释 ECMAScript 2016 字符串模板的语法、用法和应用场景，并提供示例代码及深入的学习材料。
语法
字符串模板使用反引号 ` （也称为重音符号）来定义字符串，以及使用 ${expression} 引用变量或表达式。例如：
const name = 'John';
const str = `Hello, ${name}!`;
console.log(str); // Hello, John!在上面的示例中，反引号 ` 用来定义字符串模板，变量 name 通过 ${} 来引用。
还可以在字面量表达式中嵌入更复杂的表达式，如函数调用、三元运算符、算术运算符和属性访问。例如：
const a = 2;
const b = 3;
const str = `The result of ${a} + ${b} is ${a + b}.`;
console.log(str); // The result of 2 + 3 is 5.多行字符串
字符串模板还支持多行字符串，这对编写长字符串非常有用。使用反斜杠 \ 和换行符来创建多行字符串：
const str = `This is a multi-line string.`; console.log(str); // This is a // multi-line // string.
标签模板
标签模板是一个在字符串模板周围定义的函数，可用于处理字符串模板中的每个部分。例如：
// javascriptcn.com 代码示例
function upper(parts, ...values) {
let result = '';
for (let i = 0; i < parts.length; i++) {
result += parts[i];
if (i < values.length) {
result += values[i].toUpperCase();
}
}
return result;
}
const name = 'John';
const str = upper`Hello, ${name}!`;
console.log(str); // HELLO, JOHN!在上面的示例中，upper 函数接收两个参数：一个字符串数组 parts，和一个零个或多个表达式的数组 values。在函数中，我们遍历 parts 数组，并将其中每个字符串都附加到 result 变量上，随后，在字符串中间附加分隔的表达式的值的大写版本，并将其附加到 result 上。最后，我们返回拼接后的结果。
最后，我们可以将 upper 函数应用于字符串模板，${} 将被转换为表达式，并传递给 upper 以进行字符串处理。
应用场景
字符串模板经常用于动态生成 HTML，特别是在使用模板引擎生成模板数据时非常有用。例如：
// javascriptcn.com 代码示例
<script id="my-template" type="text/x-template">
<ul>
<% for (const item of items) { %>
<li><%= item.name %></li>
<% } %>
</ul>
</script>
<script type="text/javascript">
const items = [{ name: 'John' }, { name: 'Jane' }];
const template = document.querySelector('#my-template').innerHTML;
const compiled = _.template(template);
const html = compiled({ items });
document.body.innerHTML = html;
</script>在上面的示例中，我们定义了一个字符串模板（使用了 Underscore.js 模板语法），用于构建一个包含所有要渲染的项目的 HTML 列表。
然后，我们使用 querySelector 获取将要填充 HTML 的元素，并使用 innerHTML 属性将生成的 HTML 分配给该元素（表示创建）。
总结
字符串模板为 JavaScript 开发人员提供了一种方便、简洁、易读和安全的方式来构建字符串。它使我们可以轻松地进行格式化，插值，多行字符串和标记模板，在动态生成 HTML 和其他文本内容方面非常有用。更多了解 ES2016 以及 ECMAScript 中其他新特性的信息，我们可以访问 TC39 官方网站和 MDN 开发者社区。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653199127d4982a6eb36915a