文章目錄
- **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 是一個理想選擇。
![[從青銅到王者] Spring Boot+Redis+Kafka電商場景面試全解析](http://pic.xiahunao.cn/[從青銅到王者] Spring Boot+Redis+Kafka電商場景面試全解析)
