pug 中的“- if ... - else”命令与“if ... else”命令相同吗？答案

【问题标题】：Are the "- if ... - else" command same with "if ... else" command in pug?pug 中的“- if ... - else”命令与“if ... else”命令相同吗？
【发布时间】：2021-09-11 03:23:50
【问题描述】：

pug 中有两种定义if...else 逻辑的方式。

选项 1（使用-）

- var a = 5
- var content = {"b":"<style></style>"}
- if (content.b)
  div !{a} !{content.b}
- else
  div test

选项 2（不带-）

- var a = 5
- var content = {"b":"<style></style>"}
if (content.b)
  div !{a} !{content.b}
else
  div test

它们都可以提供我想要的相同的正确逻辑。我只想知道它们是否相同？为什么有时我必须添加- 而有时我不需要？

【问题讨论】：

标签： pug

【解决方案1】：

它们几乎相同。

如果省略连字符，则条件周围的括号是可选的。
如果您使用连字符，则括号是必需的。

否则没有实际区别。

如果您在if 中使用连字符，您还必须在兄弟else ifs 和else 中使用连字符。反之亦然。（在某些情况下，混合使用连字符和无连字符似乎可行，但这样的代码会令人困惑，所以不要这样做。）

Pug v1（也称为 Jade）中需要前导连字符。来自Conditionals in Pug docs：

Pug 的一流条件语法允许使用可选括号。

如果您来自 Pug v1，您现在可以省略前导 -。否则，它是相同的（只是普通的 JavaScript）

有效：

// No hyphens -> no parentheses required
if foo
  p text
else if bar
  p text
else
  p text

// No hyphens -> parentheses are allowed
if (foo)
  p text
else if (bar)
  p text
else
  p text

// Hyphens -> parentheses are required
- if (foo)
  p text
- else if (bar)
  p text
- else
  p text

无效：

// Hyphens -> should use parentheses
- if foo
  p text
- else if bar
  p text
- else
  p text

// Mixing hyphens and no-hyphens -> invalid or at least confusing
if (foo)
  p text
- else if (bar)
  p text
else
  p text

【讨论】：