이 글은 자바스크립트 세미콜론 규칙에 대한 지식을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
JS의 세미콜론 규칙을 알아보는 시간을 가져보세요~~~끝에 세미콜론을 사용하는 모드를 좋아하는지 아니면 세미콜론을 생략하는 모드를 좋아하는지
세미콜론이 허용되는 시나리오
세미콜론은 일반적으로 대부분의 명령문에 나타날 수 있습니다( 문) ), do-while 문, var 문, 표현식 문, continue, return, break 문, throw, 디버거 등.
밤나무:
do Statement while ( Expression ) ; 4+4; f(); debugger;
에는 빈 문을 나타낼 수 있는 세미콜론만 있습니다. 예를 들어, JS ;;는 세 개의 빈 문으로 구문 분석될 수 있습니다. 빈 문은 다음과 같이 문법적으로 올바른 구문 분석 결과를 생성하는 데 도움이 될 수 있습니다. ;;; 可解析为三个空语句(empty statement)
空语句可用于辅助产生语法合法的解析结果，如：
while(1);
如果没有末尾的分号，将会产生解析错误 —— 条件循环后必须跟随一个语句
分号还会出现在 for 循环 for ( Expression ; Expression ; Expression ) Statement 中
最后，分号还会出现在 字符串 或 正则表达式中 —— 表示分号本身
分号可以省略的场景
有些场景下分号可以省略，解析器在解析语句时会根据需要自动插入分号，大概流程可以这样理解：
书写省略 => 解析器解析时发现缺少时会无法正确解析 => 自动添加分号
so 需要明确能自动插入分号的场景，并明确不会自动插入分号且会引起解析错误的情况
规则1：当下一个 token (offending token) 和当前解析的 token (previous token) 无法组成合法语句，且满足以下一个或多个条件时，将会在 offending token 前插入一个分号：
还要考虑一种优先级更高的条件：如果插入的分号会被解析为一个空语句，或是 for 语句的头部两个分号之一，这时不会插入分号（除了 do-while 语句的终止分号外）
规则2：当解析到达源代码文件 (input stream) 的末尾时，将自动添加一个分号标识解析结束
规则3：符合 restricted production 语法的语句 —— 比较难翻译，看不懂的可以直接看栗子，这种情况主要描述的是：不应该出现换行符的地方出现换行符导致插入分号引起原语句含义变化
同时满足以下条件，将在 offending token 前自动插入一个分号：
其中 restricted production 包括且只有以下：
UpdateExpression[Yield, Await]: LeftHandSideExpression[?Yield, ?Await] [no LineTerminator here] ++ LeftHandSideExpression[?Yield, ?Await] [no LineTerminator here] -- ContinueStatement[Yield, Await]: continue; continue [no LineTerminator here] LabelIdentifier[?Yield, ?Await]; BreakStatement[Yield, Await]: break; break [no LineTerminator here] LabelIdentifier[?Yield, ?Await]; ReturnStatement[Yield, Await]: return; return [no LineTerminator here] Expression [+In, ?Yield, ?Await]; ThrowStatement[Yield, Await]: throw [no LineTerminator here] Expression [+In, ?Yield, ?Await]; ArrowFunction[In, Yield, Await]: ArrowParameters[?Yield, ?Await] [no LineTerminator here] => ConciseBody[?In] YieldExpression[In, Await]: yield [no LineTerminator here] * AssignmentExpression[?In, +Yield, ?Await] yield [no LineTerminator here] AssignmentExpression[?In, +Yield, ?Await]
简单总结：
使用 a++ 语句时，变量和 ++ 必须在同一行，否则会在 ++ 前插入分号导致语义不同
return throw yield continue break 后如果紧跟着换行，将会自动添加分号
箭头函数的 => 之前不应该有换行符
栗子 & 可能不符合预期的情况
符合预期情况
// 相当于 42;"hello"
42
"hello"
// offending token 是 }
if(x){y()}
// previous token 是 ) 且插入分号是 do while 语句的结束
var a = 1
do {a++} while(a<100)
console.log(a)
// 不会解析成 b++ 因为 b和++之间存在换行符，会在 b 之后自动插入分号
a = b
++c可能不符合预期的情况
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 ， 因为 you 和 ['h', 'e', 'y'] 的连接能命中合法语法，故它们之间不会自动插入分号 —— 与预期不一致，JS尝试将代码解析为：
const hey = 'hey'; const you = 'hey'; const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))
再看一种情况：
const a = 1 const b = 2 const c = a + b (a + b).toString()
会引发 TypeError: b is not a function
const a = 1 const b = 2 const c = a + b(a + b).toString()
if (a > b) else c = d for (a; b )
// for循环没有循环体的情况，每一个分号都不能省略 for (node=getNode(); node.parent; node=node.parent) ;
var // 这一行不会插入分号 ，因为 下一行的代码不会破坏当前行的代码
a = 1 // 这一行会插入分号
let b = 2
// 再比如这种情况，你的原意可能是定义 `a` 变量，再执行 `(a + 3).toString()`，
// 但是其实 JavaScript 解析器解析成了，`var a = 2(a + 3).toString()`，
// 这时会抛出错误 Uncaught TypeError: 2 is not a function
var a = 2
(a + 3).toString()
// 同理,下面的代码会被解释为 `a = b(function(){...})()`
a = b
(function(){
...
})()(() => {
return
{
color: 'white'
}
})()(() => {
return {
color: 'white'
}
})()TypeError를 발생시킵니다: b는 다음과 같습니다. 함수가 아님 오류, 다음과 같이 해석되기 때문입니다: 🎜return obj.method('abc')
.method('xyz')
.method('pqr')
return "a long string\n"
+ "continued across\n"
+ "several lines"
totalArea = rect_a.height * rect_a.width
+ rect_b.height * rect_b.width
+ circ.radius * circ.radius * Math.PI不要使用以下单个字符 ( [ / + - 开始一行 ， 会极有可能和上一行语句合在一起被解析( ++ 和 -- 不符合单个 +、- 字符)
注意 return break throw continue 语句，如果需要跟随参数或表达式，把它添加到和这些语句同一行，针对 return 返回内容较多的情况 (大对象，柯里化调用，多行字符串等)，可以参考规则1，避免命中该规则而引起非预期的分号插入，比如：
return obj.method('abc')
.method('xyz')
.method('pqr')
return "a long string\n"
+ "continued across\n"
+ "several lines"
totalArea = rect_a.height * rect_a.width
+ rect_b.height * rect_b.width
+ circ.radius * circ.radius * Math.PI当然大部分工程化情况下，我们最终会配合Eslint使用带分号或省略分号规范~~~
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
위 내용은 Javascript 세미콜론 규칙에 대한 지식 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
