选择 JavaScript 模板引擎
你正在构建一个 Node.js 应用——也许是一个管理后台、事务性邮件系统，或者一个轻量级内容站点。你不需要 React。你只需要在服务器上渲染一些 HTML 并发送给浏览器。这正是 JavaScript 模板引擎大展身手的地方。
本文比较几个最实用的选项——EJS、Handlebars、Pug 和 Nunjucks——帮助你为项目挑选合适的工具，无需过度纠结。
核心要点
- 模板引擎在服务器端渲染 HTML，非常适合管理后台、邮件系统以及内容驱动型站点——在这些场景下使用完整的前端框架会显得过于厚重。
- EJS 对 JavaScript 开发者最容易上手，而 Handlebars 则强制实现逻辑与展示的清晰分离。
- Pug 提供基于缩进的简洁语法，并原生支持模板继承；Nunjucks 提供 Jinja2 风格的特性，适合复杂布局。
- 始终依赖默认转义的输出标签，避免对不可信内容进行原始 HTML 渲染，以防止 XSS 与模板注入。
模板引擎 vs. 前端框架
在比较各个选项之前，有一点很重要：模板引擎和 React、Vue、Svelte 这类基于组件的框架解决的是不同的问题。 框架在浏览器中管理交互式 UI；模板引擎在服务器上生成 HTML 并将其传输到客户端——无需任何客户端 JavaScript。
对于 Node.js 中的服务端渲染、静态站点生成、邮件模板或简单的内容驱动页面，模板引擎通常是更简洁、更轻量的选择。
EJS vs Handlebars vs Pug：它们的差异
EJS（Embedded JavaScript）
EJS 是最易上手的选项。其语法就是普通的 HTML，配合 <%= %> 标签输出值，<% %> 标签处理逻辑。如果你熟悉 HTML 和 JavaScript，立刻就能高效开发。
<h1>Hello, <%= user.name %></h1>
<% if (user.isAdmin) { %>
<a href="/admin">Dashboard</a>
<% } %>EJS 作为 Express 的视图引擎非常适合用于原型、管理工具，以及团队已经熟悉 JavaScript 的项目。它的取舍在于：当逻辑膨胀时模板容易变得混乱——没有任何机制阻止你在视图中直接塞入过多的 JavaScript。
Handlebars
Handlebars 强制实现逻辑与展示之间更严格的分离。模板使用 {{ }} 语法，超出基本输出范围的任何操作都需要通过注册的 helper 函数完成。
<h1>Hello, {{user.name}}</h1>
{{#if user.isAdmin}}
<a href="/admin">Dashboard</a>
{{/if}}这种约束是一个特性，而非局限。它让模板保持可读性，并将业务逻辑推回它本应所在的 JavaScript 中。Handlebars 非常适合较大的团队、邮件模板，或者需要让非开发人员编辑视图的项目。express-handlebars 包能与 Express 无缝集成。
Pug 模板
Pug 采用了完全不同的思路。它放弃了 HTML 语法，转而使用基于缩进的简写——没有闭合标签，没有尖括号。
h1 Hello #{user.name}
if user.isAdmin
a(href='/admin') Dashboard一旦适应了语法，Pug 能产出简洁、可读的模板。它还原生支持模板继承，这使其在较大视图层级结构中颇具实用性。但学习曲线确实存在——调试空白符错误令人头疼，不熟悉该语法的设计师会感到吃力。
Nunjucks
Nunjucks 由 Mozilla 开发，参考了 Jinja2。它支持模板继承、宏、过滤器和异步渲染，是结构化服务端模板和内容密集型站点的有力选择。
<h1>Hello, {{ user.name }}</h1>
{% if user.isAdmin %}
<a href="/admin">Dashboard</a>
{% endif %}如果你需要比 EJS 更多的结构化能力，但又更偏好类 HTML 的语法（而非 Pug 的缩进风格），Nunjucks 是静态站点生成或内容密集型应用的稳妥之选。
Discover how at OpenReplay.com.
安全：输出转义至关重要
这些引擎在使用其常规输出语法时默认提供转义输出——EJS 中的 <%= %>、Handlebars 与 Nunjucks 中的 {{ }}。绝对不要在不可信的用户内容上使用未转义的输出标签（<%- %>、{{{ }}}、Pug 的 != / !{}，或 Nunjucks 的 {{ value | safe }}）。 当原始 HTML 渲染被滥用时，模板注入和 XSS 漏洞是实实在在的风险。
你应该选哪一个？
| 场景 | 推荐引擎 |
|---|---|
| 快速原型或 Express 应用 | EJS |
| 团队项目、邮件模板 | Handlebars |
| 简洁语法、模板继承 | Pug |
| 静态站点、复杂布局 | Nunjucks |
结语
模板引擎不是一种妥协——对于服务端渲染页面、邮件生成以及完整前端框架会带来不必要复杂度的轻量级站点而言，它们才是合适的工具。挑选语法契合团队工作流的那一个，把逻辑挡在模板之外，并始终如一地对用户内容进行转义。这就是你需要了解的大部分内容。
常见问题
可以。许多应用都会混合使用两种方式。你可能用模板引擎来渲染初始 HTML 外壳、营销页面或事务性邮件，同时使用 React 或 Vue 构建交互式仪表盘或特定的小部件。关键是让工具与渲染上下文相匹配：静态或 SEO 关键内容用服务端 HTML，富客户端交互则用框架。
多数情况下性能差距可以忽略不计。EJS、Pug、Handlebars 等现代引擎会将模板预编译为 JavaScript 函数，因此渲染快速且会被缓存。对于极简单的输出，手写模板字面量可能稍快，但你将失去 partial、继承和自动转义等特性。可维护性的提升通常远胜于这点微小的性能成本。
本文介绍的四种引擎默认都会对输出进行转义，因此在正确使用时它们同样安全。风险来自开发者显式选择原始输出，例如 Handlebars 的三花括号语法或 EJS 的短横线变体。把不可信输入视为敌对，从源头进行清洗，除非绝对必要，否则不要使用原始渲染。
Nunjucks 原生支持异步渲染，这在模板需要在渲染期间获取数据时非常有用。Handlebars 和 EJS 专注于同步渲染，但可以在渲染前搭配异步数据获取使用。它们都不提供像 React 那样的真正组件模型，但 partial、include 和宏提供了可复用的构建模块，足以应对大多数服务端渲染场景。
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.
