ejs基本语法理解和运用

一、标签语义

1、基础标签

基础标签，顾名思义可以理解为其他标签的基础，都是在这个标签上面的拓展，中间的内容数据记得前后要空一格
text前面半部分为开始标签，后半部分为结束标签
<% text %>
案例

// 里面输入script标签，用于控制流，没有输出
<% var name="测试" %>

输出需要输出标签：

let html = ejs.render('<% var name="测试" %><%= name %>', {});
document.getElementById('app').innerHTML = html

html代码部分：

<div id="app"></div>

输出结果展示：

2、输出标签

将值输出到模板中，会将html转义，输出的是解析过后的html字符串
<%= name %>
案例

let people = ['geddy', 'neil', 'alex']
html = ejs.render('<%= people.join(" | "); %>', {people: people})
document.getElementById('app').innerHTML = html

html代码部分：

<div id="app"></div>

输出结果：

3、清除空格标签

删除前后的空格符，不过又多中表达方式，可以删除前面，删除后面，或者删除前后空格符
**<%_ _%>**

<%_    => // 官方说的是清除前面的空格符
_%>    => // 官方说的是清除结束标签后面的空格符

这个暂时不知道怎么用，网上也没找到使用的例子？有大佬知道可以指导一下。

4、无转义标签

顾名思义，这个就是将标签里面的内容不作转义输出，原来是什么样，就输出什么样
<%- %>
注意这里：有个-%>的结束标签，这个标签的含义是删除紧随其后的换行符
这个标签一般和include结合使用，用于引入其他模板块，比如公共样式部分

let html = ejs.render('<%- "<div>你好啊</div>" %>', {})
document.getElementById('app').innerHTML = html

输出结果展示：

5、注释标签

就跟平常的注释符类似，只是作为注释，不会输出，也不会执行
<%# "注释内容" %>

html = ejs.render('<%# "这是一段注释内容" %><%= "这才是真正输出内容" %>', {people: people})
document.getElementById('app').innerHTML = html

展示输出结果：

6、字符串标签

输出字符串用，它会解析html代码为字符串，但是会在输出的字符串前后加上<% %>
<%% %>

html = ejs.render('<%% <div>输出字符串</div> %>', {people: people})
document.getElementById('app').innerHTML = html

展示结果：

二、基础语法

1、模板内容渲染

模板内容渲染有两种方式，一种是上面已经存在的，另外一个类似art-template
render
输出的是解析后的html字符串
语法:ejs.render(str,data,options)

let peoples = ['geddy', 'neil', 'alex']
let html = ejs.render('<%= peoples.join(" | ") %>', peoples)
document.getElementById('app').innerHTML = html

输出展示结果：

compile
输出的是解析后的html字符串
语法:ejs.compile(str,options);

let people = ['geddy', 'neil', 'alex']
let template = ejs.compile('<%= people.join(" | ") %>')
let html = template(people)
document.getElementById('app').innerHTML = html

展示结果：

2、模板文件渲染

读取文件，渲染文件里面的内容，输出解析后的html字符串
renderFile()
语法:ejs.renderFile(filename,data,options,function(err,str){})

现在我们创建一个file文件，用来读取
file.html

<div id="file">
   <p>登录名:<%= name %></p>
   <p>登录密码:<%= pwd %></p>
</div>

返回原文件

let people = ['geddy', 'neil', 'alex']
  ejs.renderFile('./file.html',{name: 'root',pwd: '123456'},function (err, str) {
    if (err) {
      console.log(err)
    } else {
      alert(str)
      document.getElementById('app').innerHTML = str
    }
  })

这个报错了，不知道什么原因，返回了err，难道是ejs.min.js不支持这种模式
展示结果：

options参数说明

三、包含指令

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename‘ 参数。)
语法:<%- include(filename, data) %>
使用报错了，不知道什么原因。

四、自定义分隔符

可针对单个模板或全局使用自定义分隔符，这个分隔符的意思是不用像官方指定使用%来分割，你可以自定义符号
局部：

ejs.render('<?=people.join(" | "); ?>', {people: people}, {delimiter: '?'});

全局：

ejs.delimiter = '$';
ejs.render('<$= people.join(" | "); $>', {people: people});

没有声明delimiter时：

let people = ['geddy', 'neil', 'alex']
let html = ejs.render('<$= people.join(" | ") $>',{people: people})
document.getElementById('app').innerHTML = html

展示结果：

有delimiter声明时：

let people = ['geddy', 'neil', 'alex']
let html = ejs.render('<$= people.join(" | ") $>',{people: people}, {delimiter: '$'})
document.getElementById('app').innerHTML = html

展示结果：

ejs基本语法理解和运用

原文：https://www.cnblogs.com/zjh-study/p/10640707.html