在 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 表達式之外不包含任何其他內容，因此為了清楚起見，您不妨使用緩沖代碼。 （但您可能更喜歡它們，這很好。這是個人喜好問題。）