當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/3/15 javascript 26 豆豆

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

??實例均結合node，也就是AMD規范版本

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

接收三個參數：模版字符串、data、options，返回一個字符串

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

接收四個參數：模版字符串、data、options、callback，沒有返回值

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><div></div> // ??發現是轉義的 </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>

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

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 代碼做轉義處理。

情況一：基礎，引入文本文件

// 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文件

注意：

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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。