ES9 中的模板字符串如何轻松构建完整 HTML 结构

在前端开发过程中，我们经常需要在 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 结构，代码可读性也会更好。

const title = 'Hello world!';
const content = 'This is my first blog post.';
const author = 'Alice';

const html = `
  <article>
    <h1>${title}</h1>
    <p>${content}</p>
    <footer>
      Written by ${author}.
    </footer>
  </article>
`;

上述代码中，我们使用了变量 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 结构。在实际的前端开发中，模板字符串是一个非常实用的工具，值得深入学习和使用。

示例代码

// 构建完整的 HTML 结构
const title = 'Hello world!';
const content = 'This is my first blog post.';
const author = 'Alice';

const html = `
  <article>
    <h1>${title}</h1>
    <p>${content}</p>
    <footer>
      Written by ${author}.
    </footer>
  </article>
`;

// 列表渲染
const fruits = ['apple', 'banana', 'orange'];

const list = `
  <ul>
    ${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
  </ul>
`;

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65914d7deb4cecbf2d67f948