JavaScript コードにセミコロンがある場合とない場合の違いの概要

javascriptこのコラムでは、コードにセミコロンを追加する場合と追加しない場合の違いを紹介します

##推奨事項 (無料): javascript (ビデオ)

この問題は多くの記事で議論されており、追加するかどうかに基づいて ESlint 仕様にも分かれています。セミコロンかどうか。2 つの意見の間で、セミコロンを追加するかどうかに関しては、JavaScript に対するセミコロンの影響を理解することが重要です。始める前に、次のインタビューの質問を見てください:

このコードは正常に実行できますか?

ええー

。

。

。

。

このコードを実行すると、次のエラーが表示されます:

var a = 1
(function() {
  console.log(2)
})()

なんてことだ!

1 は関数 ではありませんか?数値 1 を実行するつもりはありませんでしたが、なぜ数値 1 は関数ではないのでしょうか? この種のエラーは見つけるのが難しく、問題のあるコード行の周りをぐるぐる回ってしまうことがよくあります。このエラーは、上記のコードが実行時に同じ行であるとみなされるためであると考えられます。概念は次のとおりです:

Uncaught TypeError: 1 is not a function

したがって、即時関数の

() が 1 に追加されます。これは関数を呼び出すための構文であるため、エラー 1 は関数ではありません が発生します。このエラーを回避したい場合は、セミコロンを使用する必要があります:

var a = 1(function() { /* */ })()

ASI は自動的にセミコロンを追加します

ASI は「Automatic Semicolon Insertion」の略です。実行時、セミコロン

はコードの一部の改行に自動的に挿入されます。このメカニズムにより、次の例のように、通常どおりに実行することもできます:

var a = 1 // 随便把分号放在哪里，只要能隔开就行
;(function() {
  console.log(2)
})()

コード内の

は単項式に属しているため、 の左側にのみ配置できます。式 または 変数の右側に ASI メカニズムがない場合、コードは var b = 1 b のようなエラー ステートメントに変換されます。しかし幸いなことに、ASI では実際の動作中にセミコロンが自動的に追加されるため、上記のエラーは発生しません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var b = 1 ++b console.log('b', b)</pre><div class="contentsignin">ログイン後にコピー</div></div>

return とセミコロンの関係

別の例を見てみましょう。次のコードでは、

return

の後に空行を記述して return します。値、操作の結果は何ですか? <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var b = 1; ++b; console.log('b', b); // 2</pre><div class="contentsignin">ログイン後にコピー</div></div>このプログラムコードではASIの修正により、

return

の後にセミコロンが追加されるため、returnと期待される戻り値が分離されます。結果の return は null 値であり、最終結果は unknown のみになります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function fn() {   return    '小明' } console.log(fn())</pre><div class="contentsignin">ログイン後にコピー</div></div>

セミコロンの扱い方

もともと ASI は善意からセミコロンを含まないコード部分を修正するために使用されていましたが、一部の場所でこの問題が発生しました。これはその役割 (この記事の冒頭で紹介した即時関数など) を果たさないため、コード内でエラーが発生します。一部のコードでもエラーは発生しませんが、コードの実行結果は数千マイルも離れたところにあります。期待から。

ASI 問題を解決する方法は次のとおりです:

いずれの場合も、セミコロンを追加する必要があります。コードの分割を決定するのは完全にあなた次第です。

• セミコロンは自動的に追加されないことに注意してください。セミコロンのルール (セミコロンが自動的に挿入されない場合は、手動で追加してください)

セミコロンが自動的に追加されないルール

は以下のさまざまなコードです

はセミコロン ルールを

自動的に追加しません:

改行のコードは

(
1. 、# からです) ##[、/ 文字で始まる場合、この種の状況は通常、Uncaught TypeError を直接引き起こし、コードを実行できなくなります。 改行は
、

-

、
1. *、 % で始まります。最初は、これらの状況のほとんどが操作に影響します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function fn() {   return;   '小明'; } console.log(fn()); // undefined</pre><div class="contentsignin">ログイン後にコピー</div></div>新しい行は ,
または

.

で始まります。この使用法は主によく発生します。コードの分離が長すぎるのを避けるためです。この状況は実行には影響しませんが、適切に使用すれば、コードは読みやすくなります。
1. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var a = 1 var b = a (a + b).toString() var a = 1 [1,2,3].forEach(bar)   (function() { })() (function() { })()   var a = 1 var b = a /test/.test(b)</pre><div class="contentsignin">ログイン後にコピー</div></div>追加する必要がある状況に遭遇した場合は、セミコロン。ステートメントの最後にセミコロンを追加するだけでなく、ステートメントの最後にセミコロンを追加することもできます。「セミコロンは自動的に追加されません」を先頭に追加します (例: ()##)。 # 自体はセミコロンを自動的に追加しません。必要な場合は、先頭に ;
を追加できます (ESLint 標準 JS 仕様では、エラーを回避するためにこの方法が使用されています)。

概要

セミコロンを追加しないことでコードがよりすっきりして合理化されると考える人もいますが、ほとんどの場合、エラーは発生しないため、入力時にセミコロンを追加しない人もいます。 でも、バックエンドからフロントエンドに切り替えるためか、仕様は厳密なほうが好きですはい、慣れています、選び方については、動作制限を理解していれば大丈夫ですどのスタイルが良くても、気に入っていればOKです。

以上がJavaScript コードにセミコロンがある場合とない場合の違いの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。