Pugjs 字符串的嵌入与转义 | 春松客服

开源 同时被 2 个专栏收录
484 篇文章 1 订阅
32 篇文章 12 订阅

普通变量嵌入

设置的普通变量嵌入模版

//变量
- 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中。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值