如何将 Node.js 变量传递到 Pug 脚本标记的内部？答案

【问题标题】：How to pass a Node.js variable to the inside of a Pug script tag?如何将 Node.js 变量传递到 Pug 脚本标记的内部？
【发布时间】：2017-01-27 04:46:24
【问题描述】：

我正在尝试获取从 Node.js 发送到我的 Pug 页面的变量，并将其放置在 pug 脚本标记内的 javascript 变量中。（对不起，如果这令人困惑）我的 node.js 代码如下：

app.get('/profile', function (req, res) {
  var session = req.session;
  res.render('./login.pug', { username: session.uniqueID });
});

当我像这样在我的哈巴狗页面代码中使用变量时

input(type='text', id='username', value=username)

它工作正常。该值将更改为变量保存的用户名。但是当我尝试在我的脚本标签中放入相同的值时，例如

script.
        var currentuser = username;

浏览器控制台会告诉我用户名未定义。如何在脚本标签内正确传递变量用户名的值？还有一种方法可以将变量用户名也传递到外部 js 文件中吗？提前感谢您的帮助！

【问题讨论】：

尝试：var currentuser = !{JSON.stringify(username)}; //对我有用

标签： javascript jquery node.js express pug

【解决方案1】：

一个简单的技巧来做到这一点：

使用特殊 id 创建隐藏在 HTML 部分中的输入（我在下面的示例代码中使用 #username）
通过 JS 部分的 Id 从输入中获取值

//- HTML Section
input(type='text', id='username', value= username)

//- Script Section

script.
  var currentuser = document.getElementById("username").val();

【讨论】：

【解决方案2】：

通常在 pug 中，您可以像这样替换变量，但是当我们将句点放在脚本标记的末尾时，我们处于 Plain Text 块中，并且常规变量替换在这些块中不起作用：

script.
      ^

为了在纯文本块中输出动态 JavaScript，我们需要使用 unescaped interpolation 来使用 !{...}。

如果您只是想输出单个字符串值，只需在插值标记周围加上引号：

var currentuser = '!{username}';

当您有一个更复杂的 JavaScript 对象时，您可以对变量进行字符串化，并且不需要引号，因为它是有效的 JavaScript 输出。

路线：

res.render('test', {
  user: {"name": "Joe Smith"}
});

模板：

var currentuser = !{JSON.stringify(user)};

输出：

<script>var currentuser = {"name":"Joe Smith"};</script>

如果您好奇，#{...} 转义插值会插入无效字符，如下所示：

模板：

var currentuser = #{JSON.stringify(user)};

输出：

<script>var currentuser = {&quot;name&quot;:&quot;Joe Smith&quot;};</script>

【讨论】：