JavaScript无内置模板引擎，但支持模板字面量实现原生插值；专业引擎如Handlebars通过解析、编译、渲染三步将模板转为执行函数；推荐结合标签模板函数与可信引擎保障安全。
JavaScript 本身没有内置的“模板引擎”，但提供了原生支持字符串模板解析的能力——主要靠 模板字面量（Template Literals），也就是用反引号 ` 包裹的字符串，配合 ${...} 插值语法。这是最基础、最轻量的模板解析方式。
模板字面量：原生字符串插值
这是 ES6 引入的语法，无需第三方库，直接在运行时求值并拼接：
示例：
const name = "小明";
const age = 25;
const msg = `你好，我是${name}，今年${age}岁。`;
// → "你好，我是小明，今年25岁。"
插值部分支持任意 JavaScript 表达式，比如函数调用、三元运算、对象属性访问等：
立即学习“Java免费学习笔记（深入）”；
${items.length > 0 ? '有数据' : '空列表'}${user?.profile?.avatar || '/default.png'}${Math.round(price * 1.1)}
模板引擎的原理：字符串 + AST + 渲染函数
像 EJS、Handlebars、Mustache、Liquid 或现代的 lit-html、Marko 这类模板引擎，并不是简单替换字符串，而是分三步工作：
- 解析（Parse）：把模板字符串转成抽象语法树（AST），识别出文本节点、变量插值、条件块、循环块等结构
- 编译（Compile）：将 AST 编译为可执行的 JavaScript 函数（通常返回 HTML 字符串或 DOM 节点）
- 渲染（Render）：传入数据对象，执行编译后的函数，得到最终结果
例如 Handlebars 中的 {{#if user}}Hello {{user.name}}{{/if}}，会被编译成类似这样的函数片段：
function render(data) {
return data.user ? `Hello ${data.user.name}` : '';
}
手动实现简易模板解析（理解原理）
可以自己写一个支持 {{key}} 语法的极简版，帮助理解核心逻辑：
function render(template, data) {
return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => data[key] ?? '');
}
// 使用：
render('欢迎 {{name}}！', { name: '前端开发者' });
// → "欢迎 前端开发者！"
注意：这仅作演示，实际引擎需处理嵌套、转义、作用域、异步、缓存等复杂问题。
现代推荐方案：标签模板函数 + 模板引擎组合
结合原生能力与专业引擎，更安全高效：
- 用
html`<div>${name}</div>`（如lit-html）实现响应式、防 XSS 的 DOM 构建 - 服务端用
EJS或Pug预渲染 HTML - 构建时用
webpack+html-webpack-plugin注入变量
关键原则是：**避免字符串拼接 HTML（易 XSS），优先使用浏览器原生 DOM API 或可信模板引擎的沙箱机制。**
