JSコードにセミコロンを追加する場合と追加しない場合の違い

この問題は多くの記事で議論されていますが、ESlintの仕様でもセミコロンを付けるか付けないかで2つに分かれています。重要なのは、JavaScript に対するセミコロンの影響を理解する必要があるということです。始める前に、次のインタビューの質問を見てみましょう:

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

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

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

Uncaught TypeError: 1 is not a function

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

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

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

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

ASIセミコロン

##を自動的に追加します。 #ASI は、「Automatic Semicolon Insertion」の略です。実行時、コードの一部の破断行にセミコロン

が自動的に挿入されます。このメカニズムにより、一部のコードはセミコロンを追加せずに正常に実行できます。たとえば、次の例:

var b = 1
++b
console.log('b', b)

コード内の

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

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

return

の後の空行の後に返される値を記述します。逃げるよう頼む 結局どうなるの？ <pre class="brush:php;toolbar:false">function fn() {   return    '小明' } console.log(fn())</pre>このプログラムコードではASIの修正により、

return

の後にセミコロンが追加されるため、returnと期待される戻り値が分離されます。結果の return は null 値であり、最終結果は unknown のみになります。 <pre class="brush:php;toolbar:false">function fn() {   return;   '小明'; } console.log(fn()); // undefined</pre>セミコロンの扱い方

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

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

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

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

セミコロンのルールは追加されません自動的に追加される

次のようなさまざまな はセミコロン ルールを

自動的に追加しません:

新しい行のコードは

(## からです) #、

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

   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)

   改行は 、
-

、

*
1. 、 % で始まります。最初は、これらの状況のほとんどは次のようになります。

   var a = 2
   var b = a
   +a

   新しい行は , または
.

で始まります。この使用法はよく使用されます。これは、主にコードの分離が長くなりすぎることを避けるために発生します。この状況は実行には影響しませんが、適切に使用すれば、コードは読みやすくなります。セミコロンを追加する必要がある場合は、ステートメントの最後にセミコロンを追加するだけでなく、ステートメントの最後にセミコロンを追加することもできます。先頭に「セミコロンは自動的には追加されません」と表示されます。例:

()
1. ではセミコロンは自動的に追加されません。必要な場合は、先頭に ; を追加できます (ESLint 標準 JS 仕様では、エラーを回避するためにこの方法が使用されています)。 ##概要セミコロンを追加しないとコードがすっきりして合理化されると考える人もいますが、ほとんどの場合はそうではなく、エラーが発生するため、多くの人はコードを入力するときにセミコロンを追加しません。

ただ、私はバックエンドからフロントエンドに移行して慣れてきたせいか、仕様が厳しい方が好みです 選び方としては、動作制限を理解していればどちらのスタイルでも大丈夫です

プログラミング関連の知識については、プログラミング入門!! をご覧ください。

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