EJS（Embedded JavaScript）（一个基于JavaScript的模板引擎，用于在HTML中嵌入动态内容）
文章目录
- **1. 什么是 EJS？**
- **2. 核心特点**
- - **接近原生 HTML**
- - **动态渲染**
- - **轻量高效**
- - **与 Express 深度集成**
- **3. EJS 的基本语法**
- **4. 示例代码**
- **HTML 模板（`views/user.ejs`）**
- **Express 中渲染模板**
- **5. 使用场景**
- 1. **服务端渲染（SSR）**
- 2. **邮件模板**
- 3. **静态站点生成**
- 4. **API 文档**
- **6. 与其他模板引擎的对比**
- **7. 总结**
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 是一个理想选择。