返回上一层/10分钟入门ejs模板语法

10分钟入门ejs模板语法

2018-02-02 · xiejiahe

安装

npm i ejs -S

下面来介绍ejs标签

<% %>

流程控制标签，常用在 if/for/forEach等操作

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        age: 22
    })
})


// HTML
<div id="app">
	<% if(age==22) {%>
		<h1>true</h1>
	<% } else {%>
		<h1>false</h1>
	<% }%>
</div>

渲染成

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

<%= %>

输出标签， 不会解析HTML, 等于innerText

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        contents: 'hello world'
    })
})


// HTML
<div id="app">
	<pre><%=%></pre>
</div>

渲染成

<div id="app">
	<pre>hello world</pre>
</div>

<%- %>

输出标签，会解析HTML， 等于 innerHTML

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        contents: '<p>解析成一个p标签</p>'
    })
})

// HTML
<div id="app">
	<pre><%- contents %></pre>
</div>

渲染成

<div id="app">
	<pre>
        <p>解析成一个p标签</p>
    </pre>
</div>

<%# %>

注释标签， 作用不大。 只是一种注释。

<div id="app">
	<pre><%# comments %></pre>
</div>

渲染成

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

<%=: %>

过滤器标签，冒号后面跟着数据 | 过滤器名。 后面会详细介绍过滤的使用。

<div>
	<%=: users | first %>
</div>

<% include filename %>

文件包含， include 后面跟着文件名，不需要加后缀

// HTML
<div id="app">
	<% include header %>
    <!-- 还有另一种写法 -->
    <% include(header) %>
</div>



// header.ejs
<header>
    头部
</header>

渲染成

<div id="app">
	<header>
        头部
    </header>
</div>

关于Filters/过滤器的使用

  • first # 返回目标第0个下标value
  • last # 返回目标最后一个下标value
  • capitalize # 字符串首字母转换成大写
  • downcase # 将字符串全部转成小写
  • upcase # 将字符串全部转换成大写
  • size # 返回数组或者字符串的长度, length的别名
  • length # 返回数组或者字符串的长度, size的别名
  • plus:n # 两个数值相加, 如果数值是一个字符串会自动转换成Number
  • minus:n # 两个数值相减, 如果数值是一个字符串会自动转换成Number
  • times:n # 两个数值相乘, 如果数值是一个字符串会自动转换成Number
  • divided_by:n # 两个数值相除, 如果数值是一个字符串会自动转换成Number
  • join:‘val’ # 将数组通过指定的分隔符进行分隔成一个字符串，如果没有指定分隔符默认 ", "
  • truncate:n # 截取前N个字符串
  • truncate_words:n # 截取前N个单词, 单词以空格进行分割
  • replace:pattern,substitution # 跟原生的replace一样，字符串替换, 默认是将目标替换为空字符串
  • prepend:val # 如果目标是一个数组会将值追加到前面，如果是字符串那么拼接在前面
  • append:val # 如果目标是一个数组会将值追加到后面，如果是字符串那么拼接在后面
  • reverse # 将数组或字符串进行翻转
  • get:‘prop’ # 获取对象value, 数组或字符串下标

first 过滤器

返回目标第0个下标value

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        programingLanguage: ['JavaScript', 'Node.js', 'PHP', 'Ruby', 'Python'],
    })
})


// HTML
<div>
	<%=: users | first %>
</div>

渲染成

<div>
    JavaScript
</div>

实现方法

// 返回目录第0个下标值, 数组/字符串
exports.first = function(obj) {
  return obj[0];
};

last 过滤器

last与first相反，返回最后一个value

// 实现方法
exports.last = function(obj) {
  return obj[obj.length - 1];
};

capitalize 过滤器

字符串首字母转换成大写

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        word: 'node.js'
    })
})


// HTML
<div>
	<%=: word | capitalize %>
</div>

渲染成

<div>
    Node.js
</div>

实现方法

exports.capitalize = function(str){
  str = String(str);
  return str[0].toUpperCase() + str.substr(1, str.length);
};

downcase 过滤器

将字符串全部转成小写

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        word: 'JavaScript'
    })
})


// HTML
<div>
	<%=: word | capitalize %>
</div>

渲染成

<div>
    javascript
</div>

实现方法

exports.downcase = function(str){
  return String(str).toLowerCase();
};

upcase 过滤器

将字符串全部转换成大写, 实现方法如下

exports.upcase = function(str){
  return String(str).toUpperCase();
};

size/length 过滤器

返回数组或者字符串的长度，size和length的区别只是名字不同

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        word: 'JavaScript'
    })
})


// HTML
<div>
	<%=: word | size %>
</div>

渲染成

<div>
    10
</div>

实现方法

exports.size = exports.length = function(obj) {
  return obj.length;
};

plus 过滤器

两个数值相加, 如果数值是一个字符串会自动转换成Number

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        num: '200'
    })
})


// HTML
<div>
	<%=: num | plus:20 %>
</div>

渲染成

<div>
    220
</div>

实现方法

exports.plus = function(a, b){
  return Number(a) + Number(b);
};

minus 过滤器

两个数值相减，demo参见plus过滤器，实现方法如下

exports.minus = function(a, b){
  return Number(a) - Number(b);
};

times 过滤器

两个数值相乘，demo参见plus过滤器，实现方法如下

exports.times = function(a, b){
  return Number(a) * Number(b);
};

divided_by 过滤器

两个数值相除，demo参见plus过滤器，实现方法如下

exports.divided_by = function(a, b){
  return Number(a) / Number(b);
};

join

将数组通过指定的分隔符进行分隔成一个字符串，如果没有指定分隔符默认 ", "

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        arr: ['JavaScript', 'HTML', 'CSS']
    })
})


// HTML
<div>
	<%=: arr | join:';' %>
	<%=: arr | join %>
</div>

渲染成

<div>
    JavaScript;HTML;CSS
    JavaScript, HTML, CSS
</div>

实现方法

exports.join = function(obj, str){
  return obj.join(str || ', ');
};

truncate 过滤器

截取前N个字符串

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        str: 'hello world'
    })
})


// HTML
<div>
	<%=: str | truncate:3 %>
</div>

渲染成

<div>
    hel
</div>

实现方法

exports.truncate = function(str, len, append){
  str = String(str);
  if (str.length > len) {
    str = str.slice(0, len);
    if (append) str += append;
  }
  return str;
};

truncate_words

截取前N个单词, 单词以空格进行分割

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        str: 'My name is XieJiaHe'
    })
})


// HTML
<div>
	<%=: str | truncate:3 %>
</div>

渲染成

<div>
    My name is
</div>

实现方法

exports.truncate_words = function(str, n){
  var str = String(str)
    , words = str.split(/ +/);
  return words.slice(0, n).join(' ');
};

replace 过滤器

跟原生的replace一样，字符串替换, 默认是替换为空

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        str: 'hello world'
    })
})


// HTML
<div>
	<%=: str | replace:'world' %>
</div>

渲染成

<div>
    hello 
</div>

实现方法

exports.replace = function(str, pattern, substitution){
  return String(str).replace(pattern, substitution || '');
};

prepend 过滤器

如果目标是一个数组会将值追加到前面，如果是字符串那么拼接在前面

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        editor: ['sublime', 'notepad'] 
    })
})


// HTML
<div>
	<%=: editor | prepend:'vscode' %>
</div>

渲染成

<div>
    vscode,sublime,notepad
</div>

实现方法

exports.prepend = function(obj, val){
  return Array.isArray(obj)
    ? [val].concat(obj)
    : val + obj;
};

append

与prepend是相反的，不过多解释

实现方法

exports.append = function(obj, val){
  return Array.isArray(obj)
    ? obj.concat(val)
    : obj + val;
};

reverse 过滤器

将数组或字符串进行翻转

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        editor: ['vscode', 'notepad'] 
    })
})


// HTML
<div>
	<%=: editor | reverse %>
</div>

渲染成

<div>
    notepad,vscode
</div>

实现方法

exports.reverse = function(obj){
  return Array.isArray(obj)
    ? obj.reverse()
    : String(obj).split('').reverse().join('');
};

get 过滤器

获取对象value, 数组或字符串下标

// Node.js
app.get('/', (req, res) => {
    res.render('index', {
        editor: {
            hello: 'world'
        }
    })
})


// HTML
<div>
	<%=: editor | get:'hello' %>
</div>

渲染成

<div>
    world
</div>

实现方法

exports.get = function(obj, prop){
  return obj[prop];
};
Node.jsJavaScript
原创文章，转载请注明出处。

官方大流量卡

185G低至19元

上云优惠聚集地

爆款产品 5 折起