javascript - 如何将 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;

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

Answer 1

通常在 pug 中你可以这样替换变量，但我们在 Plain Text 中当我们将句点放在脚本标记的末尾时会阻塞，并且常规变量替换在这些 block 中不起作用:

script.
      ^

为了在纯文本 block 中输出动态 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>