几个常用的ejs语法

0.26字数 393阅读 10054

分别接触了jade和ejs,准备从这两个中间选择一个.
jade的语法虽然简便,但是总感觉和之前学的知识没有关系.
最后选择了ejs,原因是因为就是比较好学,而且和html兼容,但是感觉满屏都是%<的,脑袋有点大,不过两个都是挺好用的.
现在记录下刚学的几个语法,平常比较常用.

1.转义输出

<%= 变量名 %>

这个是转义输出,可以把变量名替换成自己需要的东西.
我们可以这么使用.

// js文件
ejs.renderFile('./views/test.ejs',{name:'wzz'},function(err,data){
  if(err){
    console.log(err);
  }else{
    console.log(data);
  }
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <%=name%>
</body>
</html>

最后我们可以发现name变量,在控制台被替换成了wzz.

2.js代码

<% Javascript代码 %>

这里面可以写javascript的代码.我们可以这么使用

// js文件
ejs.renderFile('./views/test.ejs',{json:{arr:[
  {user:'a',pass:'1'},
  {user:'b',pass:'2'},
  {user:'c',pass:'3'},
  {user:'d',pass:'4'}
]}},function(err,data){
  if(err){
    console.log(err);
  }else{
    console.log(data);
  }
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <%for(var i=0;i<json.arr.length;i++){%>
    <div>user:<%=json.arr[i].user%> pass:<%=json.arr[i].pass%><div>
  <%}%>
</body>
</html>

然后我们发现控制台循环输出了div和里面的内容

<div>user:a pass:1<div>
<div>user:b pass:2<div>
<div>user:c pass:3<div>
<div>user:d pass:4<div>

3.不转义输出

<%- 变量名%>

不转义输出可以把定义的字符串不转义的输出.
我们可以这么用,这边我们省略了第二个不使用的json数据

// js文件
ejs.renderFile('./views/test.ejs',function(err,data){
  if(err){
    console.log(err);
  }else{
    console.log(data);
  }
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <% var str='<div><div>'; %>
  <%-str %>
  <%=str %>
</body>
</html>

输出结果如下

  <div><div>
  &lt;div&gt;&lt;div&gt;

4.使用include引入外部的文件

<% include 文件的地址 %>

我们先新建一个txt文件,随便在里面填上一点内容供测试使用.
js文件和上面的一样,所以省略,下面是ejs文件

<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <% include ../content.txt %>
</body>
</html>

我们发现控制台正确的输出了我们想要的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

这就是常用的4个小方法.
对了如果不知道如何写绝对路径和相对路径,请参考下面这篇文章.
绝对路径和相对路径的写法

推荐阅读更多精彩内容