EJS学习（三）之语法规则中

⚠️实例均结合node，也就是AMD规范版本

ejs中使用render()表示渲染文本

接收三个参数：模版字符串、data、options，返回一个字符串

const ejs = require('ejs');ejs.delimiter = '$';var html = ejs.render(`<$ for(var i=0; i<num; i++ ) { -$><h2><$= user.name $></h2><h2><$= user.age $></h2><$ } -$>`,{user:{name:"wangkun",age:22,},num:2
},{rmWhitespace:true});console.log(html);// 输出：
<h2>wangkun
</h2><h2>22</h2>
<h2>wangkun
</h2><h2>22</h2>

ejs中使用renderFile()表示渲染文件

接收四个参数：模版字符串、data、options、callback，没有返回值

const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是错误，data是渲染完的数据if(err){console.log("出错了");}else{console.log(data);}
});

ejs中使用<% %>输出脚本

实例一：ejs中的for循环

// 3.ejs内容：
<!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>Document</title>
</head>
<body><% for(var i=0; i<json.arr.length; i++) {%><div>用户名：<%= json.arr[i].user %>年龄：<%= json.arr[i].age %></div><% } %>
</body>
</html>// 3.js内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/3.ejs',{json:{arr:[{user:"pear",age:"12"},{user:"apple",age:"13"},{user:"banana",age:"14"},{user:"orange",age:"15"}]}
},function(err,data){console.log(data);
});// 输出：<!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>Document</title>
</head>
<body><div>用户名：pear年龄：12</div><div>用户名：apple年龄：13</div><div>用户名：banana年龄：14</div><div>用户名：orange年龄：15</div></body>
</html>

⚠️ 所有使用 <% %> 括起来的内容都会被编译成 Javascript，你可以在模版文件中像写 js 一样 Coding，也允许你声明变量，作用域就是当前模版，因为一个模版会被编译成一个 Javascript 函数

ejs中使用<%= %>转义输出

实例一：

// 1.ejs内容：
<!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>Document</title>
</head>
<body>我的名字:<%= name %> // 表示赋值　　<%= 12+5 %>　　<%= 'asdfasdf' %>
</body>
</html>// ejs1.js内容：
const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是错误，data是渲染完的数据if(err){console.log("出错了");}else{console.log(data);}
});// 输出：
<!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>Document</title>
</head>
<body>我的名字:wangkun　　 17　　 asdfasdf

</body>
</html>

实例二：

// 2.ejs内容：
<!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>Document</title>
</head>
<body><div><%= json.arr[0].user %><%= json.arr[0].age %><%= json.arr[2].user %><%= json.arr[2].age %></div>
</body>
</html>// 2.js内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/2.ejs',{json:{arr:[{user:"pear",age:"12"},{user:"apple",age:"13"},{user:"banana",age:"14"},{user:"orange",age:"15"}]}
},function(err,data){console.log(data);
});// 输出：
<!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>Document</title>
</head>
<body><div>pear12banana14</div>
</body>
</html>

实例三：

// 4.ejs内容：
<!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>Document</title>
</head>
<body><%var str = "<div></div>"%><%= str %>
</body>
</html>// 4.js内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/4.ejs',{},function(err,data){console.log(data);
});// 输出：
<!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>Document</title>
</head>
<body>&lt;div&gt;&lt;/div&gt;  // ❗️发现是转义的
</body>
</html>

ejs中使用<%- %>非转义输出

// 4.ejs内容：
<!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>Document</title>
</head>
<body><%var str = "<div></div>"%><%- str %>
</body>
</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>Document</title>
</head>
<body><div></div>
</body>
</html>

ejs中使用<%% %>输出模版字符串

// 7.ejs内容：
<!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>Document</title>
</head>
<body><%% if(user.name) { %><%%= user.name %><%% } %>
</body>
</html>// 7.js内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/7.ejs',{user:{name:"wangkun",age:22}
},(err,data)=>{if(err) {console.error(err);}else {console.log(data);}
});// 输出：
<!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>Document</title>
</head>
<body><% if(user.name) { %><%= user.name %><% } %>
</body>
</html>

ejs中使用<%_ _%>删除标签前后的空格

情况一：<%_ 和 _%>一起使用

// 9.ejs内容：
<!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>Document</title>
</head>
<body><%_ if(user.name) { _%> <h2><%= user.name _%></h2><%_ }else{ _%><h2><%= user.age _%></h2><%_ } _%>
</body>
</html>// 9.js内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/9.ejs',{user:{name:"wangkun",age:22}
},(err,data)=>{if(err) {console.error(err);}else {console.log(data);}
});// 输出：
<!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>Document</title>
</head>
<body><h2>wangkun</h2> // 注意标签前后没有空格
</body>
</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>Document</title>
</head>
<body><h2>wangkun</h2> // 注意标签有空格
</body>
</html>

情况二：单独使用<%_

// 9.ejs内容：
<!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>Document</title>
</head>
<body><%_ if(user.name) { %> <h2><%= user.name %></h2><%_ }else{ %><h2><%= user.age %></h2><%_ } %>
</body>
</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>Document</title>
</head>
<body><h2>wangkun</h2> // 注意标签前后空格没有被删除</body>
</html>

情况三：单独使用_%>

// 9.ejs内容；
<!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>Document</title>
</head>
<body><% if(user.name) { _%> <h2><%= user.name _%></h2><% }else{ _%><h2><%= user.age _%></h2><% } _%>
</body>
</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>Document</title>
</head>
<body><h2>wangkun</h2> // 标签前后没有空格，但是样式乱了</body>
</html>

综合以上三种情况，强烈推荐<%_和_%>一起使用，可以有效删除标签前后空格并且样式不会乱☺️

ejs中使用<% -%>删除换行符

情况一：

// 10.ejs内容；
<!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>Document</title>
</head>
<body><% for(var i=0; i<num; i++ ) { -%><h2><%= user.name %></h2><h2><%= user.age %></h2><% } -%>
</body>
</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>Document</title>
</head>
<body><h2>wangkun</h2><h2>22</h2><h2>wangkun</h2> // 虽然标签前后空格删除了，但样式乱掉了<h2>22</h2></body>
</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>Document</title>
</head>
<body><h2>wangkun</h2><h2>22</h2><h2>wangkun</h2> // 标签前后有空格<h2>22</h2>
</body>
</html>

情况二：传配置参数rmWhitespace，这样格式就不会乱掉

// 10.ejs内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/10.ejs',{user:{name:"wangkun",age:22,},num:2
},{rmWhitespace:true},(err,data)=>{if(err) {console.error(err);}else {console.log(data);}
});// 输出
<!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>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2>
<h2>22</h2>
</body>
</html>

ejs中使用<%# %>进行注释没有任何输出

// 8.ejs内容：
<!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>Document</title>
</head>
<body><%# if(user.name) { %><%= user.name %><%# } %>
</body>
</html>// 8.js内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/8.ejs',{user:{name:"wangkun",age:22}
},(err,data)=>{if(err) {console.error(err);}else {console.log(data);}
});// 输出：
<!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>Document</title>
</head>
<body>wangkun</body>
</html>

ejs中使用include引入内容

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%-

include('user/show'); %> 代码包含后者。你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。

<ul><% users.forEach(function(user){ %><%- include('user/show', {user: user}); %><% }); %>
</ul>

情况一：基础，引入文本文件

// 5.ejs内容：
<!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>Document</title>
</head>
<body><% include a.txt %>
</body>
</html>// a.txt内容：
jidhhdka
kidutyui
iiiiisnhakjdhgagd// 5.js内容：
const ejs = require('ejs');ejs.renderFile('./work/lesson14/view/5.ejs',{},function(err,data){console.log(data);
});// 输出：
<!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>Document</title>
</head>
<body>jidhhdkakidutyuiiiiiisnhakjdhgagd
</body>
</html>

情况二：配合循环一起使用

// 6.ejs内容：
<!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>Document</title>
</head>
<body><% for(var i=0; i<5; i++) { %><% include a.txt %><% } %>
</body>
</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>Document</title>
</head>
<body>jidhhdka
kidutyui
iiiiisnhakjdhgagdjidhhdka
kidutyui
iiiiisnhakjdhgagdjidhhdka
kidutyui
iiiiisnhakjdhgagdjidhhdka
kidutyui
iiiiisnhakjdhgagdjidhhdka
kidutyui
iiiiisnhakjdhgagd</body>
</html>

情况三：引入css文件

// 7.ejs内容：
<!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>Document</title>
</head>
<body> <!-- 通过type判断引入谁 --><% if(type == 'admin') { %><% include admin.css %><% }else {%><% include user.css %><% } %>
</body>
</html>// admin.css内容：
div{width: 800px;
}// user.css内容：
div{width: 800px;
}

注意：

1、include因为不是js中的语法，所以要单独占据一行

2、include后面不能是变量

3、Include 可以引用相对路径的模版文件，例如有 html/index.html 和 html/_block/head.html这两个文件，你就可以在 index.html 这么用 <% include _block/head.html %>。

4、如果我们引入的是一个文本那么可以使用<% %>，但是如果是ejs或html为了防止将引入的html转义，我们要使用<%- %>

转载于:https://www.cnblogs.com/kunmomo/p/11466799.html