在前端开发中，我们经常需要根据数据动态生成 HTML 页面。虽然我们可以通过字符串拼接来实现，但这种方式往往很难维护和调试。而 ECMAScript 2015 提供了模板字符串，它可以让我们更加方便地构建动态 HTML 页面。
模板字符串介绍
模板字符串是一种特殊的字符串，它可以在字符串中嵌入表达式。模板字符串使用反引号（）包围，其中用 ${expression}` 表示表达式。
以下是一个简单的模板字符串示例：
const name = 'Tom';
const str = `Hello, ${name}!`;
console.log(str); // 输出：Hello, Tom!在上面的例子中，${name} 表示变量 name 的值。当我们把这个模板字符串打印出来时，会得到 Hello, Tom!。
在 HTML 中使用模板字符串
由于模板字符串可以嵌入表达式，因此我们可以用它来构建动态的 HTML 页面。我们可以结合 DOM API 来将生成的 HTML 插入到页面中。
以下是一个用模板字符串构建动态 HTML 页面的示例：
-- -------------------- ---- -------
----- ----- - -
- ----- ------ ---- -- --
- ----- -------- ---- -- --
- ----- --------- ---- -- --
--
----- -------- - -------------------------------------
--- ---- - ---
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
---- -- -
----
-------------------------
------------------------
-----
--
-
------------------ - -----在上面的例子中，我们定义了一个用户列表 users，然后用模板字符串循环生成了每个用户的信息。最后，我们把生成的 HTML 插入到页面的 ul 元素中。
模板字符串的进阶用法
除了基本的模板字符串用法外，我们还可以用模板字符串来构建更复杂的 HTML 页面。以下是一些常见的模板字符串用法：
多行字符串
在模板字符串中，我们可以使用多行字符串，而不需要像普通字符串那样使用 \n 转义符。例如：
const str = `
<div>
<h1>Title</h1>
<p>Paragraph</p>
</div>
`;条件表达式
我们可以在模板字符串中使用 JavaScript 的条件（三元）运算符。例如：
const isTrue = true;
const str = `
<div>
${isTrue ? '<p>True</p>' : '<p>False</p>'}
</div>
`;循环表达式
我们可以在模板字符串中使用 JavaScript 的循环语句来循环生成 HTML。例如：
-- -------------------- ---- -------
----- ----- - -
- ----- ------ ---- -- --
- ----- -------- ---- -- --
- ----- --------- ---- -- --
--
----- -------- - -
----
---------------- -- ----------------- ------------------------------
-----
--在上面的例子中，我们使用了 Array.map() 方法和 Array.join() 方法来循环生成每个用户的 HTML。
总结
模板字符串提供了一种方便的方式来构建动态 HTML 页面。我们可以使用模板字符串嵌入表达式，在生成 HTML 代码时更加方便。除了基本的模板字符串用法外，我们还可以使用多行字符串、条件表达式和循环表达式等高级用法来构建更加复杂的 HTML 页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aaafac48841e98946c1853