Javascript セミコロン ルールの知識の紹介 (例付き)

この記事では、Javascript のセミコロン ルールに関する知識を (例とともに) 紹介します。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

時間をかけて、JS のセミコロンのルールを理解してください~~~最後にセミコロンがあるモードが好きか、セミコロンを省略したほうが好きか

セミコロンが許可されるシナリオ

セミコロンは通常、do-while ステートメント、var ステートメント、expression ステートメント、 continue、return、break ステートメント、throw、debugger など、ほとんどのステートメントの最後に使用できます。

Chestnut:

do Statement while ( Expression ) ;

4+4;

f();

debugger;

にはセミコロンが 1 つだけあり、空のステートメントを表すことができます。これは JS では有効であり、;;;; は 3 つの空のステートメント (空のステートメント)

# に解析できます。 ##空のステートメント これは、次のような文法的に正しい解析結果の生成を支援するために使用できます。

while(1);

末尾にセミコロンがない場合、解析エラーが発生します。条件付きループの後には、ステートメント

セミコロンは引き続き表示されます for ループに表示されます for (式; 式; 式) ステートメント

最後に、セミコロンは文字列または正規表現にも表示されます - セミコロン自体を示します

セミコロンは省略できるシナリオ

一部のシナリオでは、セミコロンを省略できます。パーサーは、ステートメントの解析時に必要に応じてセミコロンを自動的に挿入します。おおよそのプロセスは次のように理解できます。

記述省略=> パーサー 解析中に欠落が見つかった場合、正しく解析されません => 自動的にセミコロンを追加します

そのため、セミコロンが使用できるシナリオを明確にする必要があります。セミコロンは自動的に挿入されず、解析エラーが発生することを明確にします

ルール 1: 次のトークン (問題のあるトークン) と現在解析されているトークン (前のトークン) が正当なトークンを形成できない場合ステートメントを実行し、次の条件が 1 つ以上満たされる場合、問題のあるトークンの前にセミコロンが挿入されます。

問題のあるトークンと前のトークンは、少なくとも 1 つの改行文字 (LineTerminator) で区切られています。セミコロンの挿入の効果は空のステートメント (空のステートメント)
• 問題のあるトークンは}
• 前のトークン) として解析されず、挿入されたセミコロンは終了セミコロンとして解析されます。 do-while ステートメントの

#考慮すべき優先順位の高い条件もあります。挿入された場合、セミコロンは空のステートメント、または for ステートメントの先頭にある 2 つのセミコロンのいずれかとして解析されます。 、セミコロンは挿入されません (do-while ステートメントの終了セミコロンを除く)

ルール 2: 解析がソース コード ファイル (入力ストリーム) の終わりに達すると、セミコロンが自動的に挿入されます。解析の終了をマークするために追加されました

ルール 3: 制限された生成構文に準拠するステートメント - 翻訳が難しく、理解できない この状況の主な説明は次のとおりです。改行文字が表示されるべきでない場所に改行文字が挿入されると、セミコロンが挿入され、元のステートメントの意味が変わります。

次の条件が同時に満たされる場合、問題のあるステートメントの前にセミコロンが自動的に挿入されます。トークン セミコロン:

問題のあるトークンと前のトークンが、構文制限された生成ステートメントを形成します。
• 問題のあるトークンは、制限された生成ステートメントの説明の [ここに LineTerminaator はありません] 部分に表示されます (トークン制限されたプロダクション内の注釈「[no LineTerminator here]」の直後にある端末または非端末の最初のトークンになります。)
• 問題のあるトークンと前のトークンの間には、少なくとも 1 つの改行文字 (LineTerminator) が必要です

制限されたプロダクションには次のもののみが含まれます:

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 の後に改行が続く場合、セミコロンが自動的に追加されます

矢印の => の前に改行文字があってはなりませんfunction

Chestnut & は期待される状況を満たさない可能性があります

期待される状況に準拠します

// 相当于 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: unknown のプロパティ 'forEach' を読み取れません。あなたと ['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 は関数 エラーを引き起こします。これは次のように解釈されます:

const a = 1
const b = 2
const c = a + b(a + b).toString()

Except do while ステートメントを除き、セミコロンが空のステートメントとして、または for ステートメントの先頭に必要な 2 つのセミコロンとして挿入される状況はありません。

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 の後にセミコロンが挿入され、最終的には unfineed が返されます。 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使用带分号或省略分号规范~~~

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

以上がJavascript セミコロン ルールの知識の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。