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 });
});

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

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

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

script.
        var currentuser = username;

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

Answer 1

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

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>

Answer 2

执行此操作的简单技巧：

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

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

//- Script Section

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

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

2 个答案: