在 Pug 插值中，使用缓冲代码和使用 #{..} 之间的真正区别是什么？

Question

如插值文档中所述：

 - var title = "On Dogs: Man's Best Friend"; - var author = "enlore"; - var theGreat = "<span>escape;</span>": h1= title p Written with love by #{author} p This will be safe: #{theGreat}

title遵循本地评估模板的基本模式，但#{和}之间的代码被评估、转义，并将结果缓冲到正在呈现的模板的 output 中。

这可以是任何有效的 Javascript 表达式，因此您可以做任何感觉良好的事情。

但是， h1= title中的缓冲代码仍然是“已评估、转义、缓冲...”，并且“支持 JavaScript 表达式的全部范围”，如此处所述。

那么区别是什么呢？ 我想不通。

Answer 1

从文档中的缓冲代码部分：

缓冲代码以=开头。 它评估 JavaScript 表达式并输出结果。 为了安全起见，缓冲代码首先被 HTML 转义。

来自文档中的字符串插值，转义部分：

#{和}之间的代码被评估、转义，并将结果缓冲到正在呈现的模板的 output 中。

这可以是任何有效的 Javascript 表达式，因此您可以做任何感觉良好的事情。

所以，他们俩：

1. 评估 JavaScript 表达式，
2. 逃避它，
3. output 它/缓冲它到 output。

即他们都做同样的事情。 那该用哪一个呢？ 我的直觉说：

• 如果整行是 JavaScript 表达式，则使用缓冲代码。
• 如果一行中只有一部分是 JavaScript 表达式，则使用字符串插值。

例子：

// Normal JS variables
- const name = 'John'
- const greeting = `Hello ${name}!`

// Buffered code
p= greeting                 // 1
p= 'Hello ' + name + '!'    // 2
p= `Hello ${name}!`         // 3

// Interpolation
p Hello #{name}!            // 4
p #{greeting}               // 5
p #{'Hello ' + name + '!'}  // 6
p #{`Hello ${name}!`}       // 7

// Output in all cases:
<p>Hello John!</p>

请注意，数字 3 和 7 使用模板文字。 不要与 Pug 的字符串插值（数字 4-7）相混淆。

在我看来：

• 数字 1、3 和 4 是最佳选择。
• 数字 2 可以，但使用模板文字会更好（数字 3）。
• 数字 5-7 是有效的，但可能有点不必要——这些行除了#{和}中的 JS 表达式之外不包含任何其他内容，因此为了清楚起见，您不妨使用缓冲代码。 （但您可能更喜欢它们，这很好。这是个人喜好问题。）