如何将 Node.js 变量传递到 Pug 脚本标签内部？

Question

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

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

当我在我的 pug 页面代码中使用这个变量时

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

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

script.
        var currentuser = username;

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

Answer 1

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

script.
      ^

为了在纯文本块中输出动态 JavaScript，我们需要使用未转义的插值来实现!{...}。

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

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>