JavaScript におけるセミコロンの詳細

序文

JavaScript ではセミコロンはオプションであり、使用するかどうかは主にコーディングスタイルの問題です。 1 つのスタイルは、必要でない場合でもセミコロンを使用してステートメントを明示的に終了することです。もう 1 つのスタイルは、セミコロンをできるだけ使用せず、必要な場合にのみ追加することです。個人的にはセミコロンをつけるのは好きではないのですが、もちろんそれを好む友人もたくさんいます。どちらのスタイルを好むかにかかわらず、JavaScript のセミコロンについて知っておく必要のある詳細がいくつかあります。

コードにおけるセミコロンの役割

セミコロンの主な機能は、プログラムステートメントを終了するステートメントアサーション (EOS) として、パーサーがプログラムを正しく解析できるようにすることです。多くの C スタイル言語では、主に言語コンパイラの開発コストを削減するために、セミコロンを使用してステートメント行を明示的に終了します。しかし、最近のコンパイラは複数行のステートメントを適切に処理できるほどスマートです。 Go、Scala、Ruby、Python、Swift、Groovy など、多くの言語では明示的なセミコロンの終了は必要ありません。

JavaScript は C に似た言語ですが、C や Java とは異なります。JavaScript ではセミコロンもオプションであり、Auto Semicolon Insertion (ASI) と呼ばれる自動セミコロン挿入メカニズムがあります。

JavaScript の自動セミコロン挿入メカニズム

JavaScript には、自動セミコロン挿入 (略して ASI) と呼ばれるメカニズムがあります。 ECMA-262 - 自動セミコロン挿入には、自動セミコロン挿入に関する明確な記述があります。

プログラムを左から右に解析します。文法生成規則に準拠しないトークン (問題のあるトークン) が検出されると、次のいずれかの条件が満たされている限り、問題のあるトークンの前にセミコロンが自動的に挿入されます。

少なくとも 1 つの行末文字が、問題のあるトークンを前のトークンから分離します。
問題のあるトークンは } です。

プログラムを左から右に解析すると、トークンの入力ストリームが終了し、パーサーが入力トークンストリームを単一の完全な ECMAScript プログラムに解析できない場合は、入力ストリームの最後にセミコロンが自動的に挿入されます。

プログラムを左から右に解析します。一部の文法生成規則で許可されているが制限された操作 (制限された生成) であるトークンに遭遇した場合、制限されたトークンと前のトークンの間に少なくとも 1 つの改行文字がある場合は、制限されたトークンの前にセミコロンが自動的に挿入されます。

ただし、上記のルールには追加の優先条件があります。セミコロンを挿入した後の解析結果が空のステートメントである場合、またはセミコロンを挿入した後で for ステートメントの先頭の 2 つのセミコロンのいずれかになった場合は、セミコロンは自動的に挿入されません。

注: 上記の翻訳は少しぎこちないです。何度か読み返したり、元の英語テキスト ECMA-262 - Automatic Semicolon Insertion を読んでみてください。

セミコロンの自動挿入

簡単にまとめると、自動セミコロン挿入は改行に基づいています。パーサーは新しい行を現在の行にマージしようとします。新しい行は、ASI ルールに準拠している場合にのみ、独立したステートメントとして扱われます。

主な自動挿入ルールは次のとおりです。

新しい行が現在の行に結合されると、不正なステートメントとなり、正しく解析できなくなります。セミコロンが自動的に挿入されます。
新しい行が } で始まる場合、コードブロックの末尾にセミコロンが自動的に挿入されます。
return文で終わる場合、行末にセミコロンが自動的に挿入されます。
break文で終了する場合、行末にセミコロンが自動的に挿入されます。
throw文で終わる場合、行末にセミコロンが自動的に挿入されます。
continue文で終了する場合、行末にセミコロンが自動的に挿入されます。
ES6のyield文で終わるときに行末にセミコロンを自動的に挿入する
++, -- 接尾辞式は新しい行の始まりとして使用され、行の先頭にセミコロンが自動的に挿入されます。
ソースコードファイルの末尾に数字を自動的に挿入する

上記のように、セミコロンを追加しないと、このコードを実行するとエラーが発生します。

セミコロンは省略できません

通常、文が (、[、/、+、- で始まる場合、前の行の文の一部として解釈される可能性があります。実際には、/、+、- で始まる文はほとんどありません。ただし、(、[ で始まる文は非常に一般的であり、通常は防御的に行の先頭にセミコロンを追加できます。

先ほど、セミコロンの自動挿入について学習しました。ここで、いくつかの例を見てみましょう。

hey = 'hey'とする
['liu','liuxing'].forEach(console.log)

ちょっと考えてみてください。上記の結果は何でしょうか?このコードを実行すると

キャッチされない TypeError: 未定義のプロパティ 'forEach' を読み取ることができません

ルール1に基づいて、上記のコードは次のコードに解析されます。

hey = 'hey'['liu','liuxing'].forEach(console.log) とします。

先頭にセミコロンを付けずに [ で始まるステートメントを使用すると、エラーが発生する可能性が高いことがわかります。

（で始まる文の別のサンプルコードを見てみましょう。

定数a = 1
定数b = 2
定数 c = a + b
(a + b).toString()

上記のコードは値「3」を生成すると予想されますか?しかし、実際には、ASI ルールに従って次のコードに解析されるため、b は関数ではないというエラーが発生します。

定数 a = 1;定数 b = 2;定数 c = a + b(a + b).toString()

/、+、- が文頭に使われるケースを一つ一つ紹介することはしません。このような状況は比較的まれなので、自分で試してみることができます。文が (、[/+、または - で始まる場合は、文の前にセミコロンを追加する必要があることに注意してください。

次に、return の使い方を見てみましょう。

(() => {
  戻る
  {
    名前: '劉星'
  }
})()

名前付きのオブジェクトを返すことを期待していますが、undefined が返されます。これは、ASI がリターンにセミコロンを自動的に追加するためです。ここで、コードが正しく実行されるように、行を正しく折り返す必要があります。コード構造を明確にするには、正しいセミコロンに加えて、正しく適切な改行も必要であることがわかります。

要約する

JavaScript の自動セミコロン挿入メカニズムについて学習し、JavaScript がいつセミコロンを自動的に追加するかを知りました。(、[、/、+、- の先頭にセミコロンを正確に追加する必要があります。自動セミコロン挿入メカニズムには、セミコロンを追加するか追加しないかの 2 つのオプションがあります。これは、完全にあなたまたはチームの好みによります。現在では、prettier や Eslint などのスタイルを自動的に統一するツールもあります。

JavaScript のセミコロンに関するこの記事はこれで終わりです。JavaScript のセミコロンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: