首页 > 编程语言 >JavaScript到底应不应该加分号?JavaScript自动插入分号规则详解

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

时间:2024-01-18 14:59:56浏览次数:48  
标签:语句 换行 ++ JavaScript 插入 添加 应不应该 自动 详解

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 yieldasync
  • 反引号`
// 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();

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

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

总结

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

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

参考文章

标签:语句,换行,++,JavaScript,插入,添加,应不应该,自动,详解
From: https://www.cnblogs.com/easy1996/p/17972476

相关文章

  • MyBatis三级缓存详解
    MyBatis作为一款优秀的持久层框架,在处理数据库操作时提供了丰富的功能,其中之一就是三级缓存。本篇博文将深入介绍MyBatis的三级缓存,通过详细的例子带你了解三级缓存的使用和原理。背景MyBatis的三级缓存是指在执行SQL语句时,可以将查询的结果缓存在三个不同的范围内,分别是LocalC......
  • SpringSecurity-认证流程源码级详解
    自定义用户认证逻辑处理用户信息获取逻辑:UserDetailsService处理用户校验逻辑:UserDetails处理密码加密解密:PasswordEncoder认证处理流程以表单认证为例:从发起认证请求到认证过滤器,接着认证成功后,响应从认证过滤器返回的整个过程。SpringSecurity做了什么,设计到了哪些类?他......
  • Javascript中addEventListener的3个参数
    //例document.addEventListener('click',()=>{//dosomething...},false) 1.addEventListener,接收3个参数第一个参数event:监听的事件名称第二个参数是函数:需要执行的事件第三个参数是useCapture(变量):用来判断是捕获还是冒泡 2.第三个参数为userCapyu......
  • JavaScript自建文档
    JavaScript温习文档JavaScript的使用场景网页特效发(node.js)桌面程序(electron)app(cordova)硬件控制(物联网)游戏开发(cocos2d-js)浏览器执行js过程渲染引擎:解析html和css,chrome用的blink,老版本用的webkitjs引擎:也叫js解析器,用来读取网页中的JavaScript......
  • JavaScript(JS) 判断没有属性的空对象{}的四种方法
    ​ JavaScript(JS)中对象没有属性初始化时,可能使用{}进行初始化,如此我们判断这样的没有属性的空对象就不是很方便,本文主要介绍JavaScript(JS)中判断没有属性的空对象{}的五种方法,以及相关的示例代码。1、通过JSON.stringify()判断可以使用JSON.stringify()将Javascript对象......
  • 正则表达式复习七——JavaScript 中使用
    JavaScript使用JavaScript的正则表达式是由RegExp对象表示的,同时也可以使用正则表达式字面量。1.使用RegExp对象letpattern=newRegExp("pattern","flags");pattern是字符串形式的正则表达式模式。flags是字符串形式的修饰符,可以包含i,g,m等。letpattern......
  • Java异步编程详解
    在现代应用程序开发中,异步编程变得越来越重要,特别是在处理I/O密集型任务时。Java提供了一套强大的异步编程工具,使得开发者能够更有效地处理并发任务。本篇博文将深入探讨Java中异步编程的方方面面,通过具体例子详细说明异步编程的实践。异步编程的背景在传统的同步编程模型中,任务......
  • 利用javascript获取并修改伪元素的值
    HEAD中添加style标签强制覆盖初始属性这个方法是利用内部css样式的高优先级来覆盖外部css,好处是简单易理解,实现简单。坏处就是吃相太难看,过于粗暴。varstyle=document.createElement('style');style.innerHTML=".test::before{color:green}";//添加样式内容的话也可以用上面提......
  • RocketMQ 中冷热分离的随机索引模块详解
    作者:苏昌盛消息系统中随机索引的特点RocketMQ广泛使用于各类业务场景中,在实际生产场景中,用户通常会选择消息ID或者特定的业务Key(例如学号,订单号)来查询和定位特定的一批消息,进而定位分布式系统中的复杂问题。传统方案下,消息索引的存储是基于数据库系统或者基于本地文件系统实现......
  • RocketMQ 中冷热分离的随机索引模块详解
    作者:苏昌盛消息系统中随机索引的特点RocketMQ广泛使用于各类业务场景中,在实际生产场景中,用户通常会选择消息ID或者特定的业务Key(例如学号,订单号)来查询和定位特定的一批消息,进而定位分布式系统中的复杂问题。传统方案下,消息索引的存储是基于数据库系统或者基于本地文件系统实......