将变量传递给 Pug/Jade 的标签插值功能

Question

Pug 官方页面关于标签插值的引述：

Interpolation works not only on JavaScript values, but on Pug as well. You could accomplish the same thing by writing an HTML tag inline with your Pug…but then, what’s the point of writing the Pug? Wrap an inline Pug tag declaration in #[ and ], and it’ll be evaluated and buffered into the content of its containing tag.

简而言之，我从这里得到的是，我可以根据我放入 #[].

中的任何内容来评估 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) 只是导致变量 return 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 #[myName]

与

相同

h5 My name is
    myName

两者都编译为

<h5> My name is
    <myName></myName>
</h5>

不管 myName 是否是先前定义的 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)。也许该示例适用于 jade aka pug v1？

对我有用的语法是使用 #{} 如下：

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

将变量传递给 Pug/Jade 的标签插值功能

Passing a variable to Pug/Jade's Tag Interpolation feature

pug