JavaScript无内置模板引擎，但支持模板字面量实现原生插值；专业引擎如Handlebars通过解析、编译、渲染三步将模板转为执行函数；推荐结合标签模板函数与可信引擎保障安全。

JavaScript 本身没有内置的“模板引擎”，但提供了原生支持字符串模板解析的能力——主要靠 模板字面量（Template Literals），也就是用反引号 ` 包裹的字符串，配合 ${...} 插值语法。这是最基础、最轻量的模板解析方式。

模板字面量：原生字符串插值

这是 ES6 引入的语法，无需第三方库，直接在运行时求值并拼接：

示例：

const name = "小明";
const age = 25;
const msg = `你好，我是${name}，今年${age}岁。`;
// → "你好，我是小明，今年25岁。"

插值部分支持任意 JavaScript 表达式，比如函数调用、三元运算、对象属性访问等：

• ${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`${name}`（如 lit-html）实现响应式、防 XSS 的 DOM 构建
• 服务端用 EJS 或 Pug 预渲染 HTML
• 构建时用 webpack + html-webpack-plugin 注入变量

关键原则是：**避免字符串拼接 HTML（易 XSS），优先使用浏览器原生 DOM API 或可信模板引擎的沙箱机制。**