JS コードにセミコロンを追加する必要がありますか?

JavaScript のセミコロンはコミュニティを表します。とにかくセミコロンを使用することを好む人もいます。セミコロンを追加しないことを好む人もいます。

長年セミコロンを使用してきた後、2017 年の秋に、必要に応じてセミコロンを追加しないようにし、必要なコード構造でセミコロンが必要な場合を除き、コードからセミコロンを自動的に削除するように Prettier を設定することにしました。

セミコロンを使用しないのは非常に自然であることがわかりました。そのようなコードは見栄えがよく、より簡潔で読みやすいと思います。

JavaScript は厳密にはセミコロンを必要としないため、これは完全に可能です。どこかにセミコロンが必要な場合は、裏でセミコロンを追加します。

このプロセスは自動セミコロン挿入と呼ばれます。

予想とは異なる動作をするバグのあるコードを作成しないように、セミコロンの使用規則を理解することが重要です。

セミコロンを自動的に追加するための JavaScript ルール

JavaScript インタープリターは、ソース コードを解釈するときに次の特殊な状況を検出すると、セミコロンを自動的に追加します。

##コードの次の行がコードの現在の行に割り込み始めたとき (コードは複数行で記述できます)

• 次の行が } で始まったら、閉じます現在のブロック

• ソースコードの最後に到達したとき

• 現在の行で return が宣言されたとき

• 現在の行でbreakが宣言された場合

• 現在の行でthrowが宣言された場合

• Continueが宣言された場合現在の行
#コード例を使用して

これらのルールについて別の方法で考えてください。いくつかの例を次に示します。

例を見てください:

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you
['h', 'e', 'y'].forEach((letter) => console.log(letter))

ルール 1 に基づいて、JavaScript はコードを ## として解釈しようとするため、「Uncaught TypeError: Cannot read property 'forEach' of unknown」というエラーが発生します。 #

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

このコード:

(1 + 2).toString()

は「3」として出力されます。

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

代わりに、JavaScript が ## として解釈しようとするため、TypeError: b is not a function 例外が発生します。 #

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

ルール 4 に基づいた別の例:

(() => {
  return
  {
    color: 'white'
  }
})()

すぐに呼び出される関数の戻り値は、color プロパティを含むオブジェクトであると予想されますが、そうではありません。代わりに、JavaScript が return の後にセミコロンを挿入するため、これは未定義です。

代わりに、return の後に左括弧を置く必要があります:

(() => {
  return {
    color: 'white'
  }
})()

このコードでは '0' が表示されると思います:

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

代わりに 2 が表示されます。これは JavaScript に従っているためです。ルール 1 への変更は次のように解釈されます:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

終了ステートメント

注意してください。セミコロンに問題がある人もいます。あまり気にしませんが、このツールにはセミコロンを使用しないオプションがあるので、セミコロンの使用を避けることができます。

私は何も提案していません。ご自身の判断に委ねているだけです。

注意する必要があるのは、ほとんどの場合、これらの基本的なシナリオがコードに現れることはありません。

次のようないくつかのルールを抜粋します。

return ステートメントは慎重に使用してください。何かを返す場合は、返されたコンテンツと同じ行に追加します (break、throw、 continue と同様)

#行を括弧で始めないでください。括弧は前の行と連結される可能性があります。関数呼び出しまたは配列要素の参照を形成するには
最後に、必ずコードをテストして、ニーズを満たしていることを確認してください。

• 推奨チュートリアル: 「

  JS チュートリアル
」

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