<%# 这是 EJS 多行注释。
它可以跨越多行,
但绝对不会被输出展示在
最终渲染生成的 HTML 中。
%>
let ejs = require('ejs');
let template = ejs.compile(str, options);
template(data);
// => 返回渲染后的 HTML 字符串
ejs.render(str, data, options);
// => 返回渲染后的 HTML 字符串
ejs.renderFile(filename, data, options, function (err, str) {
// str => 返回渲染后的 HTML 字符串
});
<%- include('partials/navbar.ejs') %>
带数据参数引入子模板:
<% include('header', { title: 'My Page' }) %>
<ul>
<% users.forEach(function(user){ %>
<%- include('item', {user: user}); %>
<% }); %>
</ul>
要包含/引入子模板,必须提供文件名选项,且相对路径生效。
<% if (userLoggedIn) { %>
<p>Welcome, <%= username %>!</p>
<% } else { %>
<p>Please log in.</p>
<% } %>
<ul>
<% for(i=0; i < users.length; i++) { %>
<li><%= users[i].username %></li>
<% } %>
</ul>
let ejs = require('ejs'),
users = ['geddy', 'neil', 'alex'];
// 针对单个模板自定义
ejs.render('<?= users.join(" | "); ?>', { users: users }, { delimiter: '?' });
// => 'geddy | neil | alex'
// 全局全局设置
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', { users: users });
// => 'geddy | neil | alex'
let ejs = require('ejs'),
LRU = require('lru-cache');
// 设置容量为 100 项的 LRU 缓存
ejs.cache = LRU(100);
let ejs = require('ejs');
let myFileLoader = function (filePath) {
return 'myFileLoader: ' + fs.readFileSync(filePath);
};
ejs.fileLoader = myFileLoader;
<%- include('header'); -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer'); -%>
<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', { people: people });
// 使用 jQuery 渲染:
$('#output').html(html);
// 原生 JavaScript 渲染:
document.getElementById('output').innerHTML = html;
</script>
let str = "Hello <%= include('file', {person: 'John'}); %>",
fn = ejs.compile(str, { client: true });
// include 回调函数
fn(data, null, function (path, d) {
// path -> 'file'
// d -> {person: 'John'}
// 此处编写您的代码
// 返回文件内容的字符串
}); // 返回渲染后的字符串
| 选项参数 | 详细含义与功能说明 |
|---|---|
| cache | 是否缓存编译后的函数,需要配合 filename 选项使用 |
| filename | 用于缓存机制的键名 key,以及解析 include 相对路径时的基准 |
| root | 为带绝对路径的 include 包含(如 /file.ejs)设置项目根目录,可以是一个包含多个目录路径的数组 |
| views | 解析相对路径 include 时使用的查找路径目录数组 |
| context | 函数执行时的上下文绑定作用域(即 this) |
| compileDebug | 当设为 false 时,不会编译调试插桩代码,可提升运行性能 |
| client | 设为 true 时,返回可独立在浏览器运行的已编译客户端函数 |
| delimiter | 模板内部使用的自定义分隔符字符,默认为 % |
| openDelimiter | 开启标签的自定义分隔符字符,默认为 < |
| closeDelimiter | 关闭标签的自定义分隔符字符,默认为 > |
| debug | 是否打印输出生成的函数体调试代码 |
| strict | 设为 true 时,在严格模式 (Strict Mode) 下运行生成的 JavaScript 函数 |
| _with | 是否使用 with() {} 结构。如果为 false,局部变量将存储在 locals 对象中(隐式开启 --strict) |
| localsName | 不使用 with 时存储局部变量的对象名称,默认为 locals |
| rmWhitespace | 移除所有可安全移除的空白字符(包括首尾空白),同时为所有脚本标签开启更安全的 -%> 换行剥离模式 |
| escape | <%= 结构使用的转义函数,在渲染和生成客户端函数 .toString() 时调用(默认转义 XML/HTML) |
| outputFunctionName | 设为指定字符串(如 'echo' 或 'print'),用于在脚本块标签内直接打印输出 |
| async | 设为 true 时,EJS 将使用 async 异步函数进行渲染(需要 JS 运行时支持 async/await) |
| 标签语法 | 详细功能说明 |
|---|---|
<% |
'脚本控制' 标签,用于条件/循环控制流,无输出 |
<%_ |
'消除左侧空白' 脚本标签,清除该标签前的所有空白字符 |
<%= |
将变量值输出至模板中(经过 HTML 转义) |
<%- |
将未转义的原始变量值输出至模板中 |
<%# |
注释标签,不执行代码,不产生输出 |
<%% |
输出字面量 <% 字符 |
%> |
普通闭合结束标签 |
-%> |
修剪模式标签,移除紧随其后的换行符 |
_%> |
'消除右侧空白' 闭合标签,移除该标签后的所有空白字符 |
| 参数选项 | 详细含义与功能说明 |
|---|---|
cache |
缓存编译后的函数,需要同时指定 filename |
-o / --output-file FILE |
将渲染输出写入 FILE 文件中,而非直接输出至控制台 stdout |
-f / --data-file FILE |
必须是 JSON 格式文件。解析 FILE 文件内容作为渲染所需的数据 |
-i / --data-input STRING |
必须是 JSON 格式且经过 URI 编码的字符串。解析 STRING 作为渲染数据 |
-m / --delimiter CHARACTER |
使用带有尖括号的 CHARACTER 字符作为开闭分隔符(默认为 %) |
-p / --open-delimiter CHARACTER |
使用 CHARACTER 字符替代左尖括号 < 作为开启标记 |
-c / --close-delimiter CHARACTER |
使用 CHARACTER 字符替代右尖括号 > 作为关闭标记 |
-s / --strict |
设为 true 时,在严格模式下生成 JavaScript 函数 |
-n / --no-with |
使用 locals 对象存储变量而非 with 结构(隐式开启 --strict) |
-l / --locals-name |
不使用 with 时存储局部变量的对象名称 |
-w / --rm-whitespace |
移除所有安全可移除的空白字符,包含首尾前导与后缀空白 |
-d / --debug |
输出生成的函数体调试代码 |
-h / --help |
显示命令行帮助信息 |
-V / -v / --version |
显示 EJS 的版本号 |
命令行使用示例:
$ ejs -p [ -c ] ./template_file.ejs -o ./output.html
$ ejs ./test/fixtures/user.ejs name=Lerxst
$ ejs -n -l _ ./some_template.ejs -f ./data_file.json