JavaScript ではセミコロンを追加する必要がありますか?

JavaScript のセミコロンはオプションです。セミコロンを追加するかどうかは主にコーディングスタイルの問題ですが、しばらく付けない、またはしばらく付けないでください。通常、ステートメントが "("、"["、"/"、" "、または "-" で始まる場合、そのステートメントは前の行のステートメントの一部として解釈される可能性があります。この場合、防御的にセミコロンを追加できます。

#このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript のセミコロンはオプションです はい、セミコロンを追加するかどうかは主にコーディング スタイルの問題です。1 つのスタイルは、セミコロンが必要ない場合でも、ステートメントを明確に終了するためにセミコロンを使用することです。もう 1 つのスタイルは、セミコロンの追加を避けることです。

注: セミコロンは追加することも追加しないこともできますが、次の場合には追加しないでください。

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

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

JavaScript は C に似た言語ですが、C や Java とは異なり、セミコロンも JavaScript ではオプションであり、自動セミコロン挿入 (ASI) を使用します。

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

JavaScript には、ASI と呼ばれる自動セミコロン挿入のメカニズム (Automatic Semicolon Insertion) があります。 ECMA-262 の自動セミコロン挿入の説明 - 自動セミコロン挿入:

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

• 問題のあるトークンは

  }

  .

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

プログラムを左から右に解析すると、一部の文法プロダクションで許可されているトークンが見つかりましたが、これは制限された操作 (制限されたプロダクション) です。制限付きトークンと前のトークンをオブジェクトにすると、制限付きトークンの前にセミコロンが自動的に挿入されます。

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

• 注: 上記の説明の翻訳はぎこちないので、何度か読むか、英語の原文 ECMA-262 - 自動セミコロン挿入
  ## を読んでください。

  # セミコロンの自動挿入の状況

簡単にまとめると、自動セミコロン挿入は行置換に基づいており、パーサーは次の場合に限り、新しい行を現在の行にマージしようとします。 ASI ルールを満たしています。新しい行を独立したステートメントとして扱う

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

新しい行が存在する場合現在の行にマージすると、不正なステートメントになります。正しく解析できない場合、新しい行が

}

で始まるときにセミコロン

が自動的に挿入されます。

• ##return
ステートメントで終了する場合、セミコロン ## が自動的に挿入されます。

• ##break

  行の終わりの場合 ステートメントが終了すると、行末にセミコロンが自動的に挿入されます

• ステートメントが throw

  で終わる場合、行末にセミコロンが自動的に挿入されます。

• continu## で終わる場合#e ステートメントの場合、行末にセミコロンが自動的に挿入されます。

• ES6 の yield ステートメントで終了する場合、行末にセミコロンが自動的に挿入されます

• , -- サフィックス式は新しい行の先頭として使用され、行の先頭にセミコロンが自動的に挿入されます

• ソース コード ファイルの末尾に自動挿入される番号

• #上記のように、セミコロンがない場合、次のときにエラーが報告されます。このコードを実行します。 セミコロンを省略できないケース

• 通常、

  (
,

で始まる文の場合) [

、

/

、 、- は、前のステートメント行の一部として解釈される場合があります。実際には、

/

、 、- で始まるステートメントはまれですが、(、[ で始まるステートメントは非常に一般的であり、通常は擁護できます)行の先頭に必要に応じてセミコロンを追加します。<p> 先ほど、セミコロンの自動挿入について学びました。次に、いくつかの例を見てみましょう。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let hey = &amp;#39;hey&amp;#39; [&amp;#39;liu&amp;#39;,&amp;#39;liuxing&amp;#39;].forEach(console.log)</pre><div class="contentsignin">ログイン後にコピー</div></div><p> 少し上記の結果について考えてみませんか?このコードを実行すると、ルール 1 に基づいて </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Uncaught TypeError: Cannot read property &amp;#39;forEach&amp;#39; of undefined</pre><div class="contentsignin">ログイン後にコピー</div></div><p> がスローされます。上記のコードは次のコードに解析されます。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let hey = &amp;#39;hey&amp;#39;[&amp;#39;liu&amp;#39;,&amp;#39;liuxing&amp;#39;].forEach(console.log)</pre><div class="contentsignin">ログイン後にコピー</div></div><p>##[##] で始まるステートメントを使用すると、次のことがわかります。 #、その前にセミコロンがないとエラーが発生する場合があります。 <code>

(

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const a = 1 const b = 2 const c = a + b (a + b).toString()</pre><div class="contentsignin">ログイン後にコピー</div></div>で始まるステートメントのコード例を見てみましょう。上記のコードの結果は "3" だと思いますか? しかし実際には、エラーをスローします

b は関数

ではありません。ASI ルールに従って、次のコードに解析されるためです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const a = 1;const b = 2;const c = a + b(a + b).toString()</pre><div class="contentsignin">ログイン後にコピー</div></div>1 つずつ紹介しません

/

, , - はステートメントの先頭として使用されます。この状況は比較的まれです。自分で試してみてください。ステートメントが (# で始まることに注意してください) ##, [ , /, , - の先頭には、ステートメントの前にセミコロンを追加する必要があります! return の使い方を見てみましょう この場合、

(() => {
  return
  {
    name: 'Liu Xing'
  }
})()

は

name

のオブジェクトを返すと期待される値ですが、

unknown が返されます。 では ASI が自動的に返されます にセミコロンが追加されます。コードが正しく実行されるように、ここでは正しい改行が必要です。正しいセミコロンに加えて、正しく適切な行も必要であることがわかります。

概要

私たちは、JavaScript の自動セミコロン挿入メカニズムと、JavaScript がセミコロンを自動的に追加するタイミングについて理解しています。 # #(,

[

, /, , - では、先頭にセミコロンを正確に追加する必要があります。自動セミコロン挿入メカニズムには 2 つのオプションがあります, セミコロンを追加するかどうか? それはすべてあなたまたはあなたのチームの好みによって異なります. 現在では、スタイルを自動的に統一するための Prettyer、Eslint、およびその他のツールも用意されています。 [関連する推奨事項: JavaScript ビデオ チュートリアル 、基本的なプログラミング ビデオ ]

以上がJavaScript ではセミコロンを追加する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。