LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JavaScript到底应不应该加分号?JavaScript自动插入分号规则详解

freeflydom
2024年1月18日 14:8 本文热度 420

JavaScript 提供了 automatic semicolon insertion (ASI)自动插入分号规则,在不加分号的情况下,会自动补充分号来分隔不同语句。

导致在继左大括号换行、tab 和 space 圣战后,前端又出现了一场战争。

并且随着那个男人加入这场讨论之后,关于是否应该加分号的讨论更是激烈了。

ASI 自动插入分号规则

在决定是否添加分号之前,我们先来了解一下编译器到底在哪些情况下会自动插入分号,哪些情况必须手动添加分号。

会自动添加分号的情况

1.遇到换行符,但是两句代码连接是无效代码

// 代码

42

'hello'


// `42 'hello'`连接在一起是无效语句,所以会自动在之间插入分号

42;'hello'


// 直接明确的写法

42;"hello"

// 代码

let a = 10, b = 5

a

-

b


// a - b 为有效代码,所以三者之间不会自动加分号

a = 1; b = 2;


// 直接明确的写法

a - b


2.遇到换行符,但是两句代码之间不允许有换行符

// 代码

foo

++

bar

++

baz


// foo 和 ++ 符合规则1,但是不符合 no LineTerminator here规则,所以会添加分号

foo; 

++bar; 

++baz;

在 JS 标准中,有个 no LineTerminator here 的规则,规定哪些语法不能加入换行符,如果开发者加了换行符,则 JS 编译器会无法识别并加入分号。

  1. 带标签的continue语句,不能continue后插入换行;

  2. 带标签的break语句,不能在break后面插入换行;

  3. return后面不能插入换行;

  4. 后自增、后自减运算符前不能插入换行;

  5. throwException之间不能插入换行;

  6. async关键字,后面不能插入换行;

  7. 箭头函数的箭头前,不能插入换行;

  8. yield之后,不能插入换行。

3.Restricted productions
如果这些标签后,空一行书写其它语句,则会自动在这些标签后添加分号:

  • ++ or --

  • return

  • break

  • continue

  • ES6 yield 、async 等

  • 反引号`

// return 后空一行再书写语句,则会自动在 return 后加分号

return

{

  a: 1

}


// 这是正确写法

return {

  a: 1

}

其它标签类似。

如果手动在这些标签后加上分号,同样也是错误的,比如:

// 空一行再写 a,会自动在 ++ 后添加分号

++

a


// 就算手动添加,和上面结果一样是错误的

++;

a;

所以针对 Restricted productions ,无论让编译器自动添加分号,还是自己手动加上分号,都是错误的,都应该去避免去换行,避免写这种写法。

必须手动加分号的情况

以下面这些标签开头的命令,必须在前面加分号,和前面一个语句分隔:

  • + 和 -:语句以 + 或者 - 开头

  • /: 语句以正则表达式开头

  • ( : 语句以自执行函数开头

  • [: 语句以数组开头

举例说明:

// 错误

a = b

+a

// 正确

a = b

;+a



// 错误

a = b

/something/.test(a)

// 正确

a = b

;/something/.test(a)


// 错误

a = b

(function () {})()

// 正确

a = b

;(function() {})()


// 错误

a = b

[1, 2, 3].forEach()

// 正确

a = b

;[1, 2, 3].forEach()

上面的情况,如果第二行代码不手动添加分号的话,两行代码会合并在一起导致结果错误或者报错。

上面几种情况中,只有自执行函数和数组开头会在极少情况下遇到,记住这两个前面要手动加上分号即可。

就算是习惯加分号的朋友,但仍然要注意下面的情况:

// 不需要结尾添加分号

if () {


// 不需要结尾添加分号

for () {


// 不需要结尾添加分号

while () {


// 需要在结尾添加分号

var a = function () {

}; 


// 需要在结尾添加分号

var a = {

  prop: value

}; 


// 报错

[1, 2, 3].forEach();

即便习惯写分号的朋友,也很少有人在 if 、forwhile 等语句 } 后写分号,但是如果使用赋值的形式传递,则一定要注意在 } 把分号添加上,以避免后面语句出现自执行和数组开头的语句。

推荐遇到自执行和数组开头的,直接前面加上分号就完事了。

总结

是否添加和是否手动加是两回事,我们可以用 eslint、Prettier 等工具自动生成或者删除分号,是否手动加可以看个人喜好,最终代码内可以根据项目要求用工具生成。

但都要注意必须添加分号的几种情况。

参考文章

作者:程序员李林

转自:https://www.cnblogs.com/easy1996/p/17972476


该文章在 2024/1/18 17:17:04 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved