Question

Pug官方页面关于标签插值的语录：

插值不仅适用于JavaScript值，而且适用于Pug。您可以通过编写与Pug内联的HTML标签来完成同一件事……但是，编写Pug的目的是什么？在＃[和] 中包装一个内联Pug标签声明，它将被评估并缓冲到其包含标签的内容中。

简单地说，我从这里可以得到的是，我可以根据放在#[]中的内容来评估Pug语言。

这确实是行为。示例：

（something.pug）：

h5 My name is #[-console.log('hi from serverside')] //outputs hi from serverside

但是，我希望能够将变量传递给插值部分，如下所示：

（不起作用）：

-var john = -console.log('hi from serverside') //will render now
-console.log(typeof john) // number o.O
h5 My name is #[john] //but now nothing

我想也许我需要做一些类型转换？ typeof x显示变量是一个数字，但是Number(john)只是使变量返回NaN。

如何将变量传递给实际上将运行的#[x]？

Answer 1

Pug的标签插值功能的语法要求定义一个标签。

示例1

h5 My name is #[span]

与

相同

h5 My name is
    span

两者均可编译

<h5> My name is
    <span></span>
</h5>

示例2

从同样的意义上说，

h5 My name is #[john]

与

相同

h5 My name is
    john

两者均可编译

<h5> My name is
    <john></john>
</h5>

无论john是否为先前定义的javascript变量。

示例3

内联标签插值的正确用法如下：

h4 Hello, my name is #[span John Wick]

编译为：

<h4>Hello, my name is <span>John Wick</span></h4>

其目的是允许在Pug中更多地内联标签的语义放置。

示例4

如果要将变量输出为字符串，请使用常规string interpolation：

- var name = 'John'

h4 Hello my name is ${name}

编译为：

<h4>Hello my name is John</h4>

示例5

如果要将内联标签插值与变量的常规字符串插值一起使用，也可以这样做：

- var name = 'John Wick'

h4 Hello, my name is #[span ${name}]

但是您需要指定正在使用的标签（在这种情况下为span）

示例6

如果需要，还可以使标签名称动态化：

- var myTag = 'em'
- var myName = 'John Wick'

h4 Hello, my name is #[${myTag} ${myName}]

编译为：

<h4>Hello, my name is <em>John Wick</em></h4>

希望这会有所帮助。

Answer 2

我也想知道如何实现这一目标。

输入：

const name = 'John Wick';

如何产生以下输出？

<h4>Hello, my name is <em>John Wick</em></h4>

我正在看可接受的答案中的示例5，该示例使用${}作为字符串插值，但是在撰写本文时，这似乎不适用于最新的哈巴狗（2.0.4）。也许这个例子适用于玉又名哈巴狗v1？

最适合我的语法是使用#{}，如下所示：

- const name = 'John Wick';
h4 Hello, my name is #[em #{name}]