Pug变量在a href标签中未被评估

Question

在我���Express JS网络应用程序中，一个login路由向登录pug视图渲染一些变量。

在login.js中。

router.get('/login', function(req, res, next) {
  var locations = ["Location 1", "Location 2"];
  var count = 0;
  var title = 'Login';
  console.log("req.originalUrl=" + req.originalUrl);

  res.render('login', {
           title: title, // Give a title to our page
           jsonData: locations, // Pass data to the View
           count: locations.length,
           originalUrl: req.originalUrl
      });
});

在login.pug文件中

extends layout

block content
  div(class='container mt-3')
    h2 Welcome to #{title}, #{count}, #{originalUrl}
    a(class="btn btn-primary" href="/location/new" role="button") NEW
    br
    br
    ul#locList(class='list-group')
      for location in jsonData
        li(class="list-group-item")
          a(href='#{originalUrl}' + '?' + location, class='list-group-item list-group-item-action')
            h2=location

a href中的originalUrl变量没有被评估为'http://localhost:3000/login?Location%201', 而是'http://localhost:3000/login#{originalUrl}?Location%201'。

因此，我不得不将其更改为'a(href=originalUrl + '?' + location, class='list-group-item list-group-item-action')'以使其正常工作。

简而言之，对于a href，a(href='#{originalUrl}')无法工作，而a(href=originalUrl)可以工作。

然而，在行'h2 Welcome to #{title}, #{count}, #{originalUrl}'中，相同的变量被正确地评估为'Welcome to Login, 2, /login'。

为什么相同的变量在a href和h2中被评估为不同的结果呢？

- alextc

---

这是因为当你在引号内使用 #{variableName} 时，Pug 将其解析为字面字符串。但是当你尝试在任何引号之外使用它时，它会理解这是一个变量并使用其值。 - Mohit Bhardwaj

Answer 1

这是已知行为，几个版本前就出现了（我想是在2016年）。这种插值#{style}不支持属性：

注意：

Pug/Jade的早期版本支持诸如：

a(href="/#{url}")链接 现在不再支持此语法。以下是替代方案（请查看我们的迁移指南以获取有关Pug v2及其早期版本之间其他不兼容性的更多信息）

更多信息请参见：https://pugjs.org/language/attributes.html

你应该能够使用常规的模板字面量。

a(href=`${originalUrl}`)

- Mark

---

在链接上添加括号，它就会起作用，例如：a(href=${originalUrl}) - Asencion

@Mark Meyer，非常感谢你，我已经寻找答案很久了。我尝试了各种语法技巧，但都没有奏效...而你的确奏效了！ - CodeConnoisseur

Answer 2

有一种简单的方法可以做到这一点，直接写变量，不使用引号、括号、$、!或#，像这样：

a(href=originalUrl) !{originalURL}

这将生成一个带有原始URL文本的链接。

例如：如果originalUrl = 'www.google.es'。

a(href='www.google.es') www.google.es

最终你获得了链接：www.google.es

- Sergi Nadal