ejs模版语法

模板语言是什么?就是帮我们用 JavaScript 代码生成 HTML 页面。那我们看下它怎么渲染 HTML:

const ejs = require('ejs'),
let people = ['geddy', 'neil', 'alex']
const html = ejs.render('<%= people.join(", "); %>', {people: people});

是不是和 ReactDOM 的 render 很像?

ReactDOM.render(

Hello, Mum

, document.getElementById('root'));

用模版语言渲染页面的方法都大同小异,而且一般也不会单独用ejs,像vue-cli这些框架都帮我们集成好了。所以这个部分不用太过关注,更不用去精读它的教程。在现代项目里,我们一般只需要用到它的模版语法。

ejs 语法

1. 纯脚本标签

<% code %>
里面可以写任意的 js,用于流程控制,无任何输出。

<% alert('hello world') %> // 会执行弹框

2. 输出经过 HTML 转义的内容

<%= value %> 可以是变量
<%= a ? b : c %> 也可以是表达式
<%= a + b %>
即变量如果包含 '<'、'>'、'&'等HTML字符,会被转义成字符实体,像< > &
因此用<%=,最好保证里面内容不要有HTML字符

const text = '

你好你好

'

<%= text %>

// 输出 <p>你好你好</p> 插入

标签中

3. 输出非转义的内容(原始内容)

<%- 富文本数据 %> 通常用于输出富文本,即 HTML内容
上面说到<%=会转义HTML字符,那如果我们就是想输出一段HTML怎么办呢?
<%-不会解析HTML标签,也不会将字符转义后输出。像下例,就会直接把

我来啦

插入

标签中

const content = '

我来啦

'

<%- content %>

4. 引入其他模版

<%- include('***文件路径') %>
将相对于模板路径中的模板片段包含进来。
<%- include指令而不是<% include,为的是避免对输出的 HTML 代码做转义处理。

// 当前模版路径:./views/tmp.ejs
// 引入模版路径:./views/user/show.ejs
    <% users.forEach(function(user){ %> <%- include('user/show', {user: user}); %> <% }); %>

5. 条件判断

<% if (condition1) { %>
  ... 
<% } %>

<% if (condition1) { %>
  ... 
<% } else if (condition2) { %>
  ... 
<% } %>

// 举例
<% if (a && b) { %>
  

可以直接放 html 内容

<% } %> <% if (a && b) { %> <% console.log('也可以嵌套任意ejs模版语句') %> <% } %>

6. 循环

<% for(var i = 0; i < target.length; i++){ %>
  <%= i %> <%= target[i] %>
<% } %>

<% for(var i in jsArr) { %>
  
<% } %>

// 推荐
<% for(var css of cssArr) { %>
  
<% } %>

你可能感兴趣的:(ejs模版语法)