EJS的简单使用

xiaoxiao2025-07-28 27

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。

1、安装

npm install ejs

2、标签含义

简洁的模板标签：<% %>

<% '脚本' 标签，用于流程控制，无输出。<%_ 删除其前面的空格符<%= 输出数据到模板（输出是转义 HTML 标签）<%- 输出非转义的数据到模板<%# 注释标签，不执行、不输出内容<%% 输出字符串 '<%'%> 一般结束标签-%> 删除紧随其后的换行符_%> 将结束标签后面的空格符删除

3、输出数据到模板（输出的是转义 HTML 标签）

// 加载ejs模块 const ejs = require('ejs'); var html = '<h1><%= username %></h1>'; // ejs.render(str, data, options); // => 输出绘制后的 HTML 字符串 var result = ejs.render(html, {username: 'liu'}); console.log(result);

4、ejs.renderFile()

app.js

// 加载ejs模块 const ejs = require('ejs'); const path = require('path'); // ejs.renderFile(filename, data, options, function(err, str){}); // 回调函数中的第二个参数 str 就是读取到的HTML 字符串 ejs.renderFile(path.join(__dirname, 'index.html'), {username: 'liu'}, (err, str) => { // str => 输出绘制后的 HTML 字符串 console.log(str); });

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>模板引擎</title> </head> <body> <h1><%= username %></h1> <ul> <% for(var i=0; i<5; i++) { %> <li>高效的 JavaScript 模板引擎:ejs</li> <% } %> </ul> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-5033871.html

Java

最新回复(0)