在 ES6 中使用模板字符串动态生成 HTML 页面-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中使用模板字符串动态生成 HTML 页面

在前端开发中，我们经常需要动态生成 HTML 页面，这时候就需要使用模板字符串来实现。ES6 中的模板字符串是一种特殊的字符串，可以包含变量或表达式，并且支持多行字符串。

使用模板字符串动态生成 HTML 页面的好处是可以减少代码量和提高可读性，同时也可以方便地维护和修改代码。下面我们来详细介绍如何使用模板字符串来动态生成 HTML 页面。

基本使用方法

模板字符串使用反引号（`）包裹字符串内容，并在字符串中使用 ${} 来插入变量或表达式。例如：

const name = 'Jack';
const age = 18;
const html = `
  <div>
    <p>Name: ${name}</p>
    <p>Age: ${age}</p>
  </div>
`;

上面的代码中，我们使用了两个变量 name 和 age，然后使用模板字符串生成了一个包含这两个变量的 HTML 页面。

使用循环生成列表

在实际开发中，我们经常需要根据数据生成列表。使用模板字符串可以很方便地实现循环生成列表。例如：

const list = ['apple', 'banana', 'orange'];
const html = `
  <ul>
    ${list.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

上面的代码中，我们使用了 map 方法将数组中的每个元素都生成了一个 li 标签，并使用 join 方法将这些 li 标签拼接成一个完整的 HTML 列表。

使用条件语句生成不同的 HTML 内容

有时候我们需要根据条件来生成不同的 HTML 内容。使用模板字符串可以很方便地实现这个功能。例如：

const isLogin = true;
const html = `
  ${isLogin ? '<p>Welcome back!</p>' : '<p>Please login first.</p>'}
`;

上面的代码中，我们根据 isLogin 变量的值来生成不同的 HTML 内容。

使用模板字符串生成复杂的 HTML 页面

使用模板字符串可以方便地生成复杂的 HTML 页面。例如：

// javascriptcn.com 代码示例
const data = [
  { name: 'apple', price: 1.5 },
  { name: 'banana', price: 2 },
  { name: 'orange', price: 1.8 },
];

const html = `
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      ${data.map(item => `
        <tr>
          <td>${item.name}</td>
          <td>${item.price}</td>
        </tr>
      `).join('')}
    </tbody>
  </table>
`;

上面的代码中，我们使用了一个数组 data，其中包含了每个商品的名称和价格。然后使用模板字符串生成了一个包含表格的 HTML 页面。

总结

使用模板字符串可以方便地动态生成 HTML 页面，减少代码量和提高可读性。在实际开发中，我们可以使用模板字符串来生成列表、条件语句、复杂的 HTML 页面等。希望本文对大家有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650a576195b1f8cacd4b15b4