模板引擎是前端开发中常用的一种技术，用于将模板和数据结合生成最终的 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 的模板字面量特性，我们可以快速实现一个简单的模板引擎。
第一步：使用模板字面量
以一个简单的用户信息表格为例，我们可以将需要动态生成的部分使用模板字面量代替。
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-------------
-----
--------
-------
----------------
--------
--------上述代码中，我们使用 ${tableContents} 替代了动态生成表格内容的部分。
第二步：动态生成模板内容
将待生成的数据对象和模板字符串传入一个函数中，使用模板字面量生成模板最终内容。生成过程中可以使用模板字面量嵌套循环、判断等语句。
-- -------------------- ---- -------
-------- ------------------- -
--- ------------- - ---
--- ---- - - -- - - ------------ ---- -
----- ---- - --------
----- ------ -
-----
---------------------
--------------------
----------------------
-------
------------- -- -------
-
----- ----- -
--------
-------
----
-----------
-----------
-------------
-----
--------
-------
----------------
--------
----------
------ ------
-上述代码中，我们通过循环遍历传入的数据对象 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 的模板字面量是实现模板引擎的一种很好的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64546369968c7c53b084df06