Jade 中的变量、全局对象和 console.log答案

【问题标题】：Variables, global objects, and console.log in jadeJade 中的变量、全局对象和 console.log
【发布时间】：2014-09-03 18:45:00
【问题描述】：

我已经使用 express 框架创建了一个应用程序，该框架以玉作为其模板引擎。在玩玉器的同时，我设置了一个我觉得很简单的测试：

在节点中，我在渲染res.render('index', { title: 'Express', docs:"is jade cool?"}); 时将对象传递给翡翠模板，而在模板中，我试图像这样调用值：

  h1= title
  p Hi!
  p Welcome to #{title}
  p #{docs}
   - console.log(docs)

  script(type='text/javascript').

   console.log(docs);

我发现我无法通过控制台记录全局对象值，如果我尝试#{docs}，它会尝试将其解析为文字命令，而不是它开始时的字符串。我还发现我无法将其分配给 JS var，如下所示：var test = #{docs};。

谁能解释一下：

#{docs}、!{docs} 和docs 有什么区别？（奇怪的是，文档中使用了所有三个示例，但都没有真正解释。）
控制台记录从 Node 传递给 Jade 的全局对象属性的正确方法是什么，以及将这些相同属性分配给本地 JS 变量的正确方法是什么？

【问题讨论】：

标签： node.js express pug

【解决方案1】：

#{docs}、!{docs} 和 docs 之间有什么区别（奇怪的是，文档中使用了所有三个示例，但没有一个真正解释过）

//This will output literal HTML <p>docs</p>
p docs

命令行示例：

echo "p docs" | jade
<p>docs</p>

//This will interpolate the variable docs into a string
//and also escape any HTML it may contain: <p>is jade cool?</p>
//To see what I mean, try passing docs: "jade is <b>cool</b>" (contains HTML)
//you'll get <p>jade is &lt;b&gt;cool&lt;/b&gt;</p>
p #{docs}

//This syntax is another flavor of the above
p= docs

命令行示例：

echo 'p #{docs}'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is &lt;b&gt;cool&lt;/b&gt;</p>

echo 'p= docs'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is &lt;b&gt;cool&lt;/b&gt;</p>

//This will do the same but NOT escape HTML
//The exclamation point is supposed to convey warning
//because this can be a XSS vulnerability
p !{docs}

命令行示例：

echo 'p !{docs}'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is <b>cool</b></p>

echo 'p!= docs'  | jade --obj '{docs: "jade is <b>cool</b>"}'
<p>jade is <b>cool</b></p>

控制台记录从节点传递给jade的全局对象属性的正确方法是什么以及将这些相同属性分配给本地js变量的正确方法

想要这样做是很常见的，而幼稚/不安全的答案是这样的：

script(type="text/javascript")!= "var myData = " + JSON.stringify(myData)

我可以通过哪些测试

jade --obj '{myData: {foo: "FOO"}}' < t1.jade

得到

<script type="text/javascript">var myData = {"foo":"FOO"}</script>

然而，在 HTML 文档中安全嵌入 JSON 数据的规则很棘手 (details here)，因此我强烈建议使用诸如 sharify 之类的帮助模块，这将确保数据在 HTML 中安全传递。

【讨论】：