在前端开发过程中，我们经常需要在 JavaScript 中构建 HTML 结构。ES9 中引入的模板字符串便可以非常轻松地实现这一功能。
模板字符串介绍
模板字符串是一种以反引号（）括起来的字符串，支持在其中使用变量、表达式、函数等。模板字符串中的变量或表达式需要用 ${}` 包裹起来。
const name = 'Alice';
const age = 20;
const greeting = `My name is ${name} and I am ${age} years old.`;模板字符串中可以包含换行符和空格符，生成的字符串也会保留这些换行符和空格符。
const text = ` 第一行 第二行 第三行 `;
模板字符串构建 HTML 结构
通过模板字符串，我们可以轻松地构建完整的 HTML 结构。可以使用变量、函数等自定义生成 HTML 结构，代码可读性也会更好。
-- -------------------- ---- -------
----- ----- - ------ --------
----- ------- - ----- -- -- ----- ---- -------
----- ------ - --------
----- ---- - -
---------
-----------------
-----------------
--------
------- -- ----------
---------
----------
--上述代码中，我们使用了变量 title、content 和 author 以及标签来生成完整的 HTML 结构。
列表渲染
除了使用变量和标签外，我们还可以使用函数来实现更复杂的 HTML 结构。列表渲染是一种常见的应用场景，我们可以通过遍历数组来生成列表。
const fruits = ['apple', 'banana', 'orange'];
const list = `
<ul>
${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
</ul>
`;上述代码中，我们使用了数组的 map 方法和模板字符串的 join 方法来生成一个包含了水果列表的 HTML 结构。
总结
通过模板字符串，我们可以轻松地构建完整的 HTML 结构，提高代码可读性，并且可以灵活使用变量、函数等生成动态的 HTML 结构。在实际的前端开发中，模板字符串是一个非常实用的工具，值得深入学习和使用。
示例代码
-- -------------------- ---- -------
-- ----- ---- --
----- ----- - ------ --------
----- ------- - ----- -- -- ----- ---- -------
----- ------ - --------
----- ---- - -
---------
-----------------
-----------------
--------
------- -- ----------
---------
----------
--
-- ----
----- ------ - --------- --------- ----------
----- ---- - -
----
------------------ -- ------------------------------
-----
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65914d7deb4cecbf2d67f948