JavaScript中的分号

JavaScript分号是可选的。我个人喜欢避免在代码中使用分号,但是许多人都喜欢使用分号。

JavaScript中的分号分隔社区。有些人更喜欢始终使用它们,无论如何。其他人喜欢避免它们。

在使用分号多年之后,在2017年秋天,我决定尝试根据需要避免使用分号,并且我确实设置了Prettier来自动从我的代码中删除分号,除非有特定的代码构造需要它们。

现在,我发现避免分号是很自然的事情,我认为代码看起来更好,而且阅读起来也更简洁。

这都是可能的,因为JavaScript并不严格要求分号。当有需要分号的地方时,它会将其添加到幕后。

执行此操作的过程称为自动分号插入

重要的是要知道支持分号的规则,以避免编写代码,因为它们的行为不符合您的预期而会生成错误。

JavaScript自动分号插入规则

当在解析源代码期间,JavaScript解析器发现以下特殊情况时,它将自动添加分号:

  1. 当下一行以中断当前代码的代码开头时(代码可以在多行中产生)
  2. 当下一行以},关闭当前块
  3. 当到达源代码文件的末尾
  4. 当有一个return自己声明
  5. 当有一个break自己声明
  6. 当有一个throw自己声明
  7. 当有一个continue自己声明

与您的想法不符的代码示例

根据这些规则,下面是一些示例。

拿着这个:

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you

[‘h’, ‘e’, ‘y’].forEach((letter) => console.log(letter))

你会得到错误Uncaught TypeError: Cannot read property 'forEach' of undefined因为基于规则1JavaScript尝试将代码解释为

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

这段代码:

(1 + 2).toString()

印刷"3"

const a = 1
const b = 2
const c = a + b
(a + b).toString()

而是引发一个TypeError: b is not a function例外,因为JavaScript尝试将其解释为

const a = 1
const b = 2
const c = a + b(a + b).toString()

基于规则4的另一个示例:

(() => {
  return
  {
    color: 'white'
  }
})()

您希望此立即调用的函数的返回值是一个包含以下内容的对象:color财产,但事实并非如此。而是undefined,因为JavaScript会在后面插入分号return

相反,您应该在右括号后return

(() => {
  return {
    color: 'white'
  }
})()

您可能会认为此代码在警报中显示“ 0”:

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

但它改为显示2,因为JavaScript根据规则1将其解释为:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

结论

当心。有些人对分号很自以为是。老实说,我不在乎,该工具为我们提供了不使用它的选择,因此我们可以避免使用分号。

除了自行决定外,我什么也没建议。

即使在大多数情况下,这些基本方案在您的代码中始终没有出现,我们只需要引起一点注意即可。

选择一些规则:

  • 小心return陈述。如果您退货,则将其与退货添加到同一行(与breakthrowcontinue
  • 从不以括号开头的行,它们可能与前一行连接在一起以形成函数调用或数组元素引用

最后,请始终测试您的代码以确保它能够满足您的要求

免费下载我的JavaScript初学者手册


更多js教程: