普通变量嵌入
设置的普通变量嵌入模版
//变量
- var msg = "打篮球";
- var name = "小明";
- var theGreat = "<span>运动</span>";
//使用 = 或者 #{} 嵌入
p= msg
p #{name} 喜欢 #{msg}
p 这是安全的:#{theGreat}
//等价于
<h1>打篮球</h1>
<p>小明 喜欢 打篮球</p>
<p>这是安全的:<span>运动</span></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><p>小明喜欢打篮球</p></div>
<div><p>小明喜欢打篮球</p></div>
//使用!{}不会进行转义,等价于
<div>
<p>小明喜欢打篮球</p>
</div>
使用 !{}的风险
如果直接使用未进行转义的数据可能会带来安全风险,例如这些数据是html标签,不进行转义的话就会被直接插入到dom中。
北京华夏春松科技有限公司,为企业交付智能客服系统、智能对话机器人、机器人客服、Chatbot。https://www.chatopera.com