Pug字符串的嵌入与转义

普通变量嵌入

设置的普通变量嵌入模版

//变量
- var msg = "打篮球";
- var name = "小明";
- var theGreat = "<span>运动</span>";
 
//使用 = 或者 #{} 嵌入
p= msg
p #{name} 喜欢 #{msg}
p 这是安全的：#{theGreat}

//等价于
<h1>打篮球</h1>
<p>小明 喜欢 打篮球</p>
<p>这是安全的：&lt;span&gt;运动&lt;/span&gt;</p>

Js表达式嵌入

里面可以是任何的正确的 JavaScript 表达式，例如

- var msg = "Hello i am xiaoming";
 
p #{msg.substring(2,8)}
//等价于
<p>llo i </p>

p #{msg.toUpperCase()}
//等价于
<p>HELLO I AM XIAOMING</p>

标签嵌入

如果我们需要嵌入标签，可以使用![]，例如

div #[p.name 你好，我是小明]
//等价于
<div>
  <p class="name">你好，我是小明</p>
</div>

字符串嵌入，不转义

在嵌入字符串时如果不需要转义，可以使用 !{}，例如

- var msg = "<p>小明喜欢打篮球</p>";
div !{msg}
//等价于
<div>
  <p>小明喜欢打篮球</p>
</div>

为什么要使用!{}

在使用过程中，我们可能需要一些字符串在不进行转义的情况下使用，这时候就需要用到!{}。否则如果使用 = 或者 #{} 来嵌入的话，字符串会被转义，并最终嵌入到模板的渲染输出中。例如

- var msg = "<p>小明喜欢打篮球</p>"; 
 
div= msg
div #{msg}
div !{msg}
//使用 = 或者 #{} 会进行转义，等价于
<div>&lt;p&gt;小明喜欢打篮球&lt;/p&gt;</div>
<div>&lt;p&gt;小明喜欢打篮球&lt;/p&gt;</div>
//使用!{}不会进行转义，等价于
<div>
  <p>小明喜欢打篮球</p>
</div>

使用 !{}的风险

如果直接使用未进行转义的数据可能会带来安全风险，例如这些数据是html标签，不进行转义的话就会被直接插入到dom中。