Javascript 세미콜론 규칙에 대한 지식 소개(예제 포함)

이 글은 자바스크립트 세미콜론 규칙에 대한 지식을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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 前插入一个分号：

• offending token 和 previous token 被至少一个换行符分割（LineTerminator），且分号插入的作用不是被解析为 空语句 (empty statement)
• offending token 是 }
• previous token 是 ), 并且插入的分号将被解析为do-while语句的终止分号

还要考虑一种优先级更高的条件：如果插入的分号会被解析为一个空语句，或是 for 语句的头部两个分号之一，这时不会插入分号（除了 do-while 语句的终止分号外）

规则2：当解析到达源代码文件 (input stream) 的末尾时，将自动添加一个分号标识解析结束

规则3：符合 restricted production 语法的语句 —— 比较难翻译，看不懂的可以直接看栗子，这种情况主要描述的是：不应该出现换行符的地方出现换行符导致插入分号引起原语句含义变化

同时满足以下条件，将在 offending token 前自动插入一个分号：

• offending token 和 previous token 组成合语法的 restricted production 语句
• offending token 出现于 restricted production 语句描述中的 [no LineTerminaator here] 部分 ( the token would be the first token for a terminal or nonterminal immediately following the annotation “[no LineTerminator here]” within the restricted production )
• offending token 和 previous token 之间至少存在一个换行符 (LineTerminator)

其中 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()

end, it will 구문 분석 오류가 발생합니다. 조건 루프 뒤에는 명령문이 와야 합니다

세미콜론은 for 루프에도 표시됩니다 for (Expression; Expression; Expression) 명령문

마지막으로 세미콜론은 명령문에도 표시됩니다. 문자열 또는 정규 표현식 —— 세미콜론 자체를 나타냅니다.

세미콜론을 생략할 수 있는 시나리오

일부 시나리오에서는 구문 분석 시 구문 분석기가 필요에 따라 세미콜론을 자동으로 삽입합니다. 이렇게 이해합니다:

글에서 생략 => ; 파서가 파싱 중에 누락된 것을 발견하면 올바르게 파싱되지 않습니다 => 세미콜론을 자동으로 추가합니다

그래서 세미콜론을 자동으로 삽입할 수 있는 시나리오를 명확히 할 필요가 있습니다. , 세미콜론이 자동으로 삽입되지 않아 구문 분석 오류가 발생하는 상황을 명확히 합니다.

규칙 1: 다음 토큰(위반 토큰)과 현재 구문 분석된 토큰(이전 토큰)이 법적 진술을 구성할 수 없는 경우, 다음 조건이 충족되면 문제가 되는 토큰 앞에 세미콜론이 삽입됩니다.

• 문제가 되는 토큰과 이전 토큰은 하나 이상의 개행 문자(LineTerminator)로 구분되며 세미콜론 삽입의 효과는 다음과 같습니다. 빈 문(빈 문)으로 구문 분석됩니다.
• 문제가 되는 토큰은}
• 이전 토큰은 다음과 같습니다. 삽입된 세미콜론은 do-while 문의 종료 세미콜론으로 구문 분석됩니다.

고려해야 할 더 높은 우선순위 조건도 있습니다. 삽입된 세미콜론이 빈 명령문으로 구문 분석되거나 for 문의 앞에 있는 두 세미콜론 중 하나인 경우에는 세미콜론이 삽입되지 않습니다. 이번에는 (do-while 문의 종료 세미콜론 제외)🎜🎜Rule 2: 구문 분석이 소스 코드 파일(입력 스트림)에 도달하면 구문 분석 종료를 표시하기 위해 자동으로 세미콜론이 추가됩니다🎜🎜Rule 3: 제한된 생산 문법을 준수하는 명령문 - 이해하기 어려운 경우 밤나무를 직접 읽으십시오. 이 상황은 주로 다음과 같이 설명합니다. 세미콜론 삽입으로 인해 원래 문의 의미가 변경됩니다. 🎜🎜동시에 다음 조건이 충족되면 문제가 되는 토큰 앞에 세미콜론이 자동으로 삽입됩니다. 🎜

• 구성 위반 토큰 및 이전 토큰 문법적으로 제한된 생산 진술
• 위반 토큰은 제한된 생산 진술 설명의 [여기에 LineTerminator 없음] 부분에 나타납니다(토큰은 터미널 또는 비터미널에 대한 첫 번째 토큰이 됩니다. 제한된 프로덕션 내 주석 "[여기에 LineTerminator 없음]")
• 문제가 있는 토큰과 이전 토큰 사이에 하나 이상의 개행 문자(LineTerminator)가 있습니다.

🎜제한된 프로덕션에는 및 다음만 해당: 🎜

if (a > b)
else c = d

for (a; b
)

🎜 간단한 요약: 🎜🎜 a++ 문을 사용할 때 변수와 ++는 같은 줄에 있어야 합니다. 그렇지 않으면 세미콜론이 ++ 앞에 삽입되어 의미가 달라집니다. 🎜🎜반환 던지기 항복 계속 🎜🎜화살표 함수의 => 앞에는 줄바꿈 문자가 없어야 합니다. 🎜🎜 예상되는 상황을 충족하지 못할 수도 있습니다. 🎜

// 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(){
...
})()

🎜는 Uncaught TypeError: Cannot read property 'forEach' of undefine 오류를 받게 됩니다. 왜냐하면 사용자와 ['h', 'e', ​​​​'y'] 사이의 연결 때문입니다. 올바른 구문에 도달할 수 있으므로 그 사이에 세미콜론이 자동으로 삽입되지 않습니다. - 기대와 일치하지 않는 JS는 다음과 같이 코드를 구문 분석합니다. 🎜

(() => {
  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

🎜 do while 문을 제외하고 세미콜론이 빈 문으로 삽입되거나 머리에 두 개의 필수 세미콜론으로 삽입되는 다른 상황이 있습니다. for 문 중: 🎜rrreee🎜위의 어느 것도 올바른 JS 문이 아니며 오류가 발생합니다🎜🎜따라서 다음 각 밤 번호는 생략할 수 없습니다! ! 🎜rrreee🎜자세한 주석이 있는 또 다른 예를 살펴보세요. 🎜rrreee🎜위는 모두 규칙 1이 적용되지 않고 세미콜론이 삽입되지 않아 구문 분석이 예상과 일치하지 않는 경우입니다. 🎜🎜규칙 3을 기반으로 한 예를 살펴보세요. : 🎜rrreee🎜 예상되는 것은 color 속성을 포함하는 객체를 반환하는 것이지만 실제로는 반환 뒤에 세미콜론이 삽입되어 최종 반환 결과는 정의되지 않았습니다. 반환 바로 뒤에 중괄호 {를 배치할 수 있습니다. 🎜rrreee🎜Best 세미콜론 생략 연습🎜

不要使用以下单个字符 ( [ / + - 开始一行 ， 会极有可能和上一行语句合在一起被解析( ++ 和 -- 不符合单个 +、- 字符)

注意 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!