如何在 pug 中插入变量字符串？

Question

在下面，myVar包含字符串“今天，它是 ${date}”。此外，还有一个名称date包含“1st of October”的变量。我希望以下 pug 语法${date}用date变量内容替换文字。

span!= myVar

不幸的是，该示例导致

<span>Today, it's the ${date}</span>

预期结果：

<span>Today, it's the 1st of October.</span>

最好的问候，本尼迪克特

Answer 1

是的，正如@omgninjas 指出的那样，它被称为插值，并在 Pug 中以 # 开头。

但是，您不能总是使用它（例如，在字符串中）。这里有些例子：

sensor 是控制器传递给视图的变量。

1. 正常插值。按预期工作：

<div id=#{sensor} style="width:90%;height:250px;"></div>

2. 在带有模板文字的字符串中（不要将它们与用户提供的值一起使用！）：

img(src=`/images/${sensor}.png`, style="width:20%")

3. 用于表示函数调用的字符串内部。请注意，您不能在函数调用中使用 ` 符号（模板文字中使用的反勾号又名重音符），因为您必须包含整个函数调用。这会产生一个不会被执行的字符串。您需要使用字符串连接。

body(onload="initTemp('"+ sensor +"')")

这是 Pug 插值的官方文档： https //pugjs.org/language/interpolation.html

希望这可以帮助。随时欢迎更正和建议！

Answer 2

要直接在 Pug 模板的字符串中渲染变量，可以使用典型的 ES6 插值。示例（假设pageTitle在范围内，并作为模板上下文传递）：

 - var pageTitle = `Google | ${pageTitle}`;

Answer 3

Pug 用哈希值进行插值。#{插值}