如何将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 标签中时，会出现问题。

script.
        var currentuser = username;

浏览器控制台会告诉我username未定义。如何正确传递变量username的值到脚本标签内？另外，有没有办法将变量username传递到外部js文件中？非常感谢您的帮助！

- Paul B.

---

尝试一下：var currentuser = !{JSON.stringify(username)}; // 对我有效 - user2432405

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>

- Graham

Answer 2

一个简单的技巧来实现这个：

• 在 HTML 部分创建一个带有特殊 ID 的隐藏输入框（在下面的示例代码中我使用了 #username）
• 在 JS 部分通过 ID 获取输入框的值

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

//- Script Section

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

- Huy Nguyen