如何将对象从 pug 传递到前端 javascript答案

【问题标题】：How to pass an object from pug to front end javascript如何将对象从 pug 传递到前端 javascript
【发布时间】：2017-01-31 21:45:07
【问题描述】：

我正在使用 pug，我想将一个变量传递给前端以获取信息，但是当我尝试这样做时，它会像文本一样传递。

我就是这样做的。

控制器代码：

res.render('view/edit', {
     title: 'Title',
     sub:true,
     data: variableObject
 });

这是渲染视图中的代码：

script(type='text/javascript').
    var x = "#{data}"
    console.log(x);

这是日志的结果

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

我无法访问对象，因为是文本，有没有办法像对象一样传递对象？

【问题讨论】：

标签： javascript node.js pugjs

【解决方案1】：

首先使用JSON.stringify 对您的对象进行字符串化：

res.render('view/edit', {
     title: 'Title',
     sub: true,
     data: JSON.stringify(variableObject)
 });

然后使用String Interpolation, Unescaped!{data}

script(type='text/javascript').
    var x = !{data}
    console.log(x);

或者只在您的模板中执行一次：

script(type='text/javascript').
    var x = !{JSON.stringify(data)}
    console.log(x);

（感谢@Matt，谢谢）

【讨论】：

如果字符串包含</script>，这将产生问题，因为浏览器会认为它是开头<script> 的关闭标签。有什么简单的解决办法吗？
有没有办法以相反的方式做到这一点？ pug 允许使用在页面呈现后创建的动态数组吗？

【解决方案2】：

在这种情况下，我使用了这个：

var x = "#{ JSON.stringify(y) }"
   console.log( JSON.parse(x.replace(/&quot;/g,'"')) );

我不确定这是否是最佳做法。

【讨论】：

在 dNitro 的回答中，使用 !{JSON.stringify(y)} 消除了转义问题。