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的渲染過程，優化頁面性能，提高開發效率。