使用 ES6 的模板字面量实现模板引擎的案例

模板引擎是前端开发中常用的一种技术，用于将模板和数据结合生成最终的 HTML 页面。传统的模板引擎需要使用特定的语法和模板语言，以及繁琐的模板编译过程。但是使用 ES6 的模板字面量却可以轻松实现模板引擎功能，而且还有更多的便利性。

ES6 模板字面量的简介

ES6 中新增了模板字面量（Template Literals）的概念，可以通过 ${} 表达式嵌入变量和表达式，更加方便快捷的拼接字符串。

const name = 'Tom';
const age = 18;

const message = `My name is ${name}, i am ${age} years old.`;
console.log(message); // 输出：My name is Tom, i am 18 years old.

实现模板引擎

利用 ES6 的模板字面量特性，我们可以快速实现一个简单的模板引擎。

第一步：使用模板字面量

以一个简单的用户信息表格为例，我们可以将需要动态生成的部分使用模板字面量代替。

// www.javascriptcn.com code example
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>手机号码</th>
    </tr>
  </thead>
  <tbody>
    ${tableContents}
  </tbody>
</table>

上述代码中，我们使用 ${tableContents} 替代了动态生成表格内容的部分。

第二步：动态生成模板内容

将待生成的数据对象和模板字符串传入一个函数中，使用模板字面量生成模板最终内容。生成过程中可以使用模板字面量嵌套循环、判断等语句。

// www.javascriptcn.com code example
function generateTable(data) {
  let tableContents = '';

  for (let i = 0; i < data.length; i++) {
    const user = data[i];
    const trTemp = 
    `<tr>
      <td>${user.name}</td>
      <td>${user.age}</td>
      <td>${user.phone}</td>
    </tr>`;
    tableContents += trTemp;
  }

  const table = 
  `<table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>手机号码</th>
      </tr>
    </thead>
    <tbody>
      ${tableContents}
    </tbody>
  </table>`;

  return table;
}

上述代码中，我们通过循环遍历传入的数据对象 data，将每一个用户信息填充进模板字面量中。最后，将生成的表格模板字符串返回。

第三步：渲染模板内容

生成模板之后，我们需要渲染到页面中。可以将生成的模板字符串直接设置到一个元素的 innerHTML 属性中，从而渲染到页面中。

const data = [
  { name: 'Tom', age: 18, phone: '13800000001' },
  { name: 'Mary', age: 20, phone: '13800000002' },
  { name: 'John', age: 22, phone: '13800000003' }
];

const table = generateTable(data);
document.getElementById('tableContainer').innerHTML = table;

总结

使用 ES6 的模板字面量实现模板引擎，可以避免传统模板引擎繁琐的语法和编译过程。通过嵌入变量和表达式，可以让模板更加直观清晰，编写起来更加简单方便。而且，它还可以嵌套循环、判断等语句，实现更多的功能。总的来说，ES6 的模板字面量是实现模板引擎的一种很好的方式。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64546369968c7c53b084df06