【知识点】Javascript分号划定规矩

2024年1月10日 306次阅读 来源: 饭饭之辈

花点时候搞清楚JS中的分号划定规矩吧~~~不论你喜好末端带分号或省略分号的形式

分号许可的场景

分号平常许可涌现在大部份语句(statement)的末端，比方 do-while statement , var statements, expression statements , continue , return , break statement, throw, debugger 等

栗子：

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

除了 do while 语句外，不会有插进去分号作为空语句的其他状况，或作为 for 语句头部的两个必要分号 ：

if (a > b)
else c = d

for (a; b
)

以上均不是正当的 JS 语句，而且会激发报错

故以下栗子中的每个分号都不能省略！！

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

以上都是未能掷中划定规矩1而未插进去分号致使剖析与预期不相符的状况

看一个基于划定规矩3的例子：

(() => {
  return
  {
    color: 'white'
  }
})()

预期是返回一个包括 color 属性的对象，但事实上 return 后会被插进去一个分号，而致使终究返回 undefined，能够经由过程在 return 后马上安排花括号 { ：

(() => {
  return {
    color: 'white'
  }
})()

省略分号的最好实践

  • 不要运用以下单个字符 ( [ / + – 最先一行 ， 会极有能够和上一行语句合在一起被剖析( ++ 和 — 不相符单个 +、- 字符)
  • 注重 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运用带分号或省略分号范例~~~

参考：
ECMAScript范例
http://ecma-international.org/ecma-262/9.0/index.html#sec-automatic-semicolon-insertion

JavaScript 中的分号(;) – JavaScript 完整手册（2018版）(翻译版)
https://www.html.cn/archives/10061

JavaScript Semicolon Insertion
Everything you need to know
http://inimino.org/~inimino/blog/javascript_semicolons

    原文作者：饭饭之辈
    原文地址: https://segmentfault.com/a/1190000018640062
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞