JavaScript模板引擎是一种将数据和HTML结构整合到一起的工具，它能够根据一定的规则，将数据填充到预设的HTML模板中，生成最终的HTML代码。有很多流行的JavaScript模板引擎,如 Handlebars、Mustache、EJS、Vue.js等。

下面以Handlebars为例，来介绍如何使用JavaScript模板引擎。

//HTML模板
<script id="myTemplate" type="text/x-handlebars-template"><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div></script>

//JavaScript代码
var source = document.getElementById("myTemplate").innerHTML;
var template = Handlebars.compile(source);
var data = {
name: "Lucy",
age: 18
};
var html = template(data);
document.getElementById("output").innerHTML = html;

在上面的代码中，我们首先定义了一个HTML模板，使用<script>标签将它嵌入到页面中。这个模板中包含了一些占位符，例如{{name}}和{{age}}，它们用于后面填充数据。然后在JavaScript代码中，我们使用Handlebars.compile方法对模板进行编译，生成一个可执行的模板函数。

接着我们定义数据，将需要动态填充的数据存储在一个对象中。最后，我们调用模板函数，将数据和模板整合到一起，生成最终的HTML代码，并将它插入到页面中的指定位置。

除了上面的基本用法外，JavaScript模板引擎还支持更高级的特性，例如循环、条件语句、自定义辅助函数等。这些特性能够更加灵活地控制HTML的渲染过程，让我们可以轻松地处理各种复杂的渲染场景。

//循环示例
<script id="myTemplate" type="text/x-handlebars-template"><ul>{{#each items}}
<li>{{ this }}</li>{{/each}}
</ul></script>

//JavaScript代码
var source = document.getElementById("myTemplate").innerHTML;
var template = Handlebars.compile(source);
var data = {
items: ["item1", "item2", "item3"]
};
var html = template(data);
document.getElementById("output").innerHTML = html;

在上面的示例中，我们利用了Handlebars的#each语句实现了一个简单的循环。我们首先定义了一个数组items，然后在模板中使用#each语句遍历这个数组，并通过this关键字获取每个数组项的值，最后将它们以<li>的形式输出到页面中。

总之，JavaScript模板引擎是一种非常有用的工具，通过它我们能够更加灵活地控制HTML的渲染过程，优化页面性能，提高开发效率。