EJS（Embedded JavaScript）（一个基于JavaScript的模板引擎，用于在HTML中嵌入动态内容）
·
文章目录
1. 什么是 EJS？
EJS（Embedded JavaScript） 是一个基于 JavaScript 的模板引擎，用于在 HTML 中嵌入动态内容。它允许开发者通过简单的语法将后端数据（如变量、数组、对象）和逻辑（如条件判断、循环）插入到 HTML 页面中，从而动态生成最终的 HTML 响应。
2. 核心特点
- 接近原生 HTML
EJS 的语法与 HTML 高度兼容，开发者无需学习全新的模板语言，只需掌握 JavaScript 即可。
- 动态渲染
支持嵌入 JavaScript 表达式、控制结构（如 if/else、for 循环）和函数调用。
- 轻量高效
无依赖，性能优异，适合服务端渲染（SSR）和静态页面生成。
- 与 Express 深度集成
是 Express 框架的默认模板引擎之一，配置简单，使用便捷。
3. EJS 的基本语法
EJS 使用 <% %> 标签包裹 JavaScript 代码，以下是常见标签：
| 标签 | 作用 |
|---|---|
<% 代码 %> |
执行 JavaScript 代码（无输出）。 |
<%= 表达式 %> |
输出表达式结果（自动转义 HTML 特殊字符）。 |
<%- 表达式 %> |
输出原始 HTML 内容（不转义）。 |
<%# 注释 %> |
添加注释（不会被渲染到最终 HTML）。 |
<%_ ... _%> |
移除标签前后的空白字符（适用于精简 HTML 输出）。 |
4. 示例代码
HTML 模板（views/user.ejs）
<!DOCTYPE html>
<html>
<head>
<title>EJS 示例</title>
</head>
<body>
<h1>欢迎，<%= user.name %>！</h1>
<p>您的角色是：<%= user.role %></p>
<% if (user.isAdmin) { %>
<p>您有管理员权限。</p>
<% } else { %>
<p>您是普通用户。</p>
<% } %>
<ul>
<% for (let item of user.items) { %>
<li><%= item %></li>
<% } %>
</ul>
</body>
</html>
Express 中渲染模板
const express = require('express');
const app = express();
// 设置 EJS 为模板引擎
app.set('view engine', 'ejs');
// 路由：渲染模板并传递数据
app.get('/', (req, res) => {
const user = {
name: 'Alice',
role: '开发者',
isAdmin: true,
items: ['项目A', '项目B', '项目C']
};
res.render('user', { user }); // 渲染 views/user.ejs
});
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});
5. 使用场景
1. 服务端渲染（SSR）
动态生成 HTML 页面（如电商网站、博客系统）。
2. 邮件模板
结合后端数据生成 HTML 邮件内容。
3. 静态站点生成
通过 Node.js 工具（如 ejs + fs）批量生成静态 HTML 文件。
4. API 文档
动态渲染 API 接口说明页面。
6. 与其他模板引擎的对比
| 模板引擎 | 语法特点 | 学习曲线 | 适用场景 |
|---|---|---|---|
| EJS | 基于 HTML + JavaScript | 低 | 快速开发、SSR、静态生成 |
| Pug | 类似缩进语法（类似 Python） | 中 | 复杂页面结构 |
| Handlebars | 使用 {{}} 标签，逻辑分离 |
中 | 前后端共用模板 |
7. 总结
EJS 是一个 简单、灵活且高效的模板引擎，特别适合已经熟悉 JavaScript 的开发者。它通过嵌入 JavaScript 逻辑到 HTML 中，实现动态内容渲染，是 Express 框架中服务端渲染的常用工具。对于需要快速开发、保持 HTML 可读性或结合静态生成的项目，EJS 是一个理想选择。
更多推荐
5
0- 0
已为社区贡献15条内容
所有评论(0)