當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2025/3/15 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 EJS学习（三）之语法规则中小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

??實(shí)例均結(jié)合node，也就是AMD規(guī)范版本

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

接收三個(gè)參數(shù)：模版字符串、data、options，返回一個(gè)字符串

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

接收四個(gè)參數(shù)：模版字符串、data、options、callback，沒有返回值

ejs中使用<% %>輸出腳本

實(shí)例一：ejs中的for循環(huán)

// 3.ejs內(nèi)容： <!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內(nèi)容： 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>

???所有使用 <% %> 括起來的內(nèi)容都會(huì)被編譯成 Javascript，你可以在模版文件中像寫 js 一樣 Coding，也允許你聲明變量，作用域就是當(dāng)前模版，因?yàn)橐粋€(gè)模版會(huì)被編譯成一個(gè) Javascript 函數(shù)?

ejs中使用<%= %>轉(zhuǎn)義輸出

實(shí)例一：

// 1.ejs內(nèi)容： <!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內(nèi)容： const ejs = require('ejs'); ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是錯(cuò)誤，data是渲染完的數(shù)據(jù)if(err){console.log("出錯(cuò)了");}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>

實(shí)例二：

// 2.ejs內(nèi)容： <!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內(nèi)容： 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>

實(shí)例三：

// 4.ejs內(nèi)容： <!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內(nèi)容： 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><div></div> // ??發(fā)現(xiàn)是轉(zhuǎn)義的 </body> </html>

ejs中使用<%- %>非轉(zhuǎn)義輸出

// 4.ejs內(nèi)容： <!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內(nèi)容： <!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內(nèi)容： 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中使用<%_ ? _%>刪除標(biāo)簽前后的空格

情況一：<%_ 和 ?_%>一起使用

// 9.ejs內(nèi)容： <!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內(nèi)容： 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> // 注意標(biāo)簽前后沒有空格 </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> // 注意標(biāo)簽有空格
</body> </html>

情況二：單獨(dú)使用<%_

情況三：單獨(dú)使用_%>

// 9.ejs內(nèi)容； <!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> // 標(biāo)簽前后沒有空格，但是樣式亂了</body> </html>

綜合以上三種情況，強(qiáng)烈推薦<%_和_%>一起使用，可以有效刪除標(biāo)簽前后空格并且樣式不會(huì)亂??

ejs中使用<% ?-%>刪除換行符

情況一：

// 10.ejs內(nèi)容； <!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> // 雖然標(biāo)簽前后空格刪除了，但樣式亂掉了<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> // 標(biāo)簽前后有空格<h2>22</h2>
</body> </html>

?情況二：傳配置參數(shù)rmWhitespace，這樣格式就不會(huì)亂掉

// 10.ejs內(nèi)容： 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中使用<%# ?%>進(jìn)行注釋沒有任何輸出

// 8.ejs內(nèi)容： <!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內(nèi)容： 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引入內(nèi)容

通過?include?指令將相對(duì)于模板路徑中的模板片段包含進(jìn)來。(需要提供 'filename' 參數(shù)。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 兩個(gè)模板文件，你可以通過?<%-?

include('user/show'); %>?代碼包含后者。你可能需要能夠輸出原始內(nèi)容的標(biāo)簽 (<%-) 用于 include 指令，避免對(duì)輸出的 HTML 代碼做轉(zhuǎn)義處理。

情況一：基礎(chǔ)，引入文本文件

// 5.ejs內(nèi)容： <!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內(nèi)容： jidhhdka kidutyui iiiiisnhakjdhgagd// 5.js內(nèi)容： 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>

情況二：配合循環(huán)一起使用

// 6.ejs內(nèi)容： <!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文件

注意：

1、include因?yàn)椴皇莏s中的語法，所以要單獨(dú)占據(jù)一行 ?

2、include后面不能是變量

3、Include 可以引用相對(duì)路徑的模版文件，例如有 html/index.html 和 html/_block/head.html這兩個(gè)文件，你就可以在 index.html 這么用 <% include _block/head.html %>。

4、如果我們引入的是一個(gè)文本那么可以使用<% %>，但是如果是ejs或html為了防止將引入的html轉(zhuǎn)義，我們要使用<%- %>

轉(zhuǎn)載于:https://www.cnblogs.com/kunmomo/p/11466799.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的EJS学习（三）之语法规则中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： EJS学习（二）之语法规则上
下一篇： gradle idea java ssm