要不要给 JavaScript 代码加分号?
JavaScript 中分号划分了社区。有些人无论如何都喜欢使用分号。其他人喜欢不加分号。
在使用分号多年之后,2017年秋,我决定尝试根据需要不加分号,并且设置 Prettier 自动移除我代码中的分号,除非是必要的代码结构需要它们。
现在我发现,不使用分号非常自然,我认为这样的代码看起来更好,它们更简洁易读。
这完全可能的,因为JavaScript并不严格要求分号。当某个地方需要分号时,它会在后台添加它。
这个过程就叫做 自动插入分号.
重要的是了解使用分号的规则,这样可以避免编写会产生 bug 的代码,因为它们的行为与您期望的不同。
JavaScript 自动添加分号的规则
JavaScript 解释器在解释源码时发现以下特殊情况,会自动添加分号:
- 当下一行代码开头中断当前行代码时(代码可以多行编写)
- 当下一行以
}
开头,关闭当前块 - 当到达源码的结尾时
- 当
return
声明在当前行 - 当
break
声明在当前行 - 当
throw
声明在当前行 - 当
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
,因为基于规则 1
,JavaScript 会尝试将代码解释为
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
语句。如果您返回某个内容,请将其添加到与返回内容相同的行中(类似还有break
、throw
、continue
) - 永远不要使用括号开始一行,这些可能与前一行连接起来,形成函数调用或数组元素引用
最后,始终测试您的代码,以确保它能满足您的需要
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: