ホームページ > 記事 > ウェブフロントエンド > Javascript セミコロン ルールの知識の紹介 (例付き)
この記事では、Javascript のセミコロン ルールに関する知識を (例とともに) 紹介します。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。
時間をかけて、JS のセミコロンのルールを理解してください~~~最後にセミコロンがあるモードが好きか、セミコロンを省略したほうが好きか
セミコロンが許可されるシナリオ
セミコロンは通常、do-while ステートメント、var ステートメント、expression ステートメント、 continue、return、break ステートメント、throw、debugger など、ほとんどのステートメントの最後に使用できます。
Chestnut:
do Statement while ( Expression ) ; 4+4; f(); debugger;
にはセミコロンが 1 つだけあり、空のステートメントを表すことができます。これは JS では有効であり、;;;;
は 3 つの空のステートメント (空のステートメント)
while(1);末尾にセミコロンがない場合、解析エラーが発生します。条件付きループの後には、ステートメント セミコロンは引き続き表示されます for ループに表示されます for (式; 式; 式) ステートメント最後に、セミコロンは文字列または正規表現にも表示されます - セミコロン自体を示しますセミコロンは省略できるシナリオ一部のシナリオでは、セミコロンを省略できます。パーサーは、ステートメントの解析時に必要に応じてセミコロンを自動的に挿入します。おおよそのプロセスは次のように理解できます。 記述省略=> パーサー 解析中に欠落が見つかった場合、正しく解析されません => 自動的にセミコロンを追加しますそのため、セミコロンが使用できるシナリオを明確にする必要があります。セミコロンは自動的に挿入されず、解析エラーが発生することを明確にしますルール 1: 次のトークン (問題のあるトークン) と現在解析されているトークン (前のトークン) が正当なトークンを形成できない場合ステートメントを実行し、次の条件が 1 つ以上満たされる場合、問題のあるトークンの前にセミコロンが挿入されます。
UpdateExpression[Yield, Await]: LeftHandSideExpression[?Yield, ?Await] [no LineTerminator here] ++ LeftHandSideExpression[?Yield, ?Await] [no LineTerminator here] -- ContinueStatement[Yield, Await]: continue; continue [no LineTerminator here] LabelIdentifier[?Yield, ?Await]; BreakStatement[Yield, Await]: break; break [no LineTerminator here] LabelIdentifier[?Yield, ?Await]; ReturnStatement[Yield, Await]: return; return [no LineTerminator here] Expression [+In, ?Yield, ?Await]; ThrowStatement[Yield, Await]: throw [no LineTerminator here] Expression [+In, ?Yield, ?Await]; ArrowFunction[In, Yield, Await]: ArrowParameters[?Yield, ?Await] [no LineTerminator here] => ConciseBody[?In] YieldExpression[In, Await]: yield [no LineTerminator here] * AssignmentExpression[?In, +Yield, ?Await] yield [no LineTerminator here] AssignmentExpression[?In, +Yield, ?Await]簡単な概要: a ステートメントを使用する場合、変数と変数は同じ行になければなりません。それ以外の場合は、異なるセマンティクスの前にセミコロンが挿入されます。return throw yield continue Break の後に改行が続く場合、セミコロンが自動的に追加されます矢印の => の前に改行文字があってはなりませんfunction Chestnut & は期待される状況を満たさない可能性があります期待される状況に準拠します
// 相当于 42;"hello" 42 "hello" // offending token 是 } if(x){y()} // previous token 是 ) 且插入分号是 do while 语句的结束 var a = 1 do {a++} while(a<100) console.log(a) // 不会解析成 b++ 因为 b和++之间存在换行符,会在 b 之后自动插入分号 a = b ++c期待される状況を満たさない可能性があります
const hey = 'hey' const you = 'hey' const heyYou = hey + ' ' + you ['h', 'e', 'y'].forEach((letter) => console.log(letter))エラー Uncaught TypeError: unknown のプロパティ 'forEach' を読み取れません。あなたと ['h', 'e', 'y'] の間の接続は正当な構文にヒットする可能性があるため、それらの間にセミコロンは自動的に挿入されません- 期待と矛盾して、JS は次のようにコードを解析しようとします:
const hey = 'hey'; const you = 'hey'; const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))別の状況を見てください:
const a = 1 const b = 2 const c = a + b (a + b).toString()は
TypeError: b は関数 エラーを引き起こします。これは次のように解釈されます:
const a = 1 const b = 2 const c = a + b(a + b).toString()Except do while ステートメントを除き、セミコロンが空のステートメントとして、または for ステートメントの先頭に必要な 2 つのセミコロンとして挿入される状況はありません。
if (a > b) else c = d for (a; b )上記のいずれも正当な JS ステートメントではないため、エラーが発生します。 したがって、次の栗のセミコロンはすべて省略できません。 !
// for循环没有循环体的情况,每一个分号都不能省略 for (node=getNode(); node.parent; node=node.parent) ;詳細なコメント付きの別の例を見てください:
var // 这一行不会插入分号 ,因为 下一行的代码不会破坏当前行的代码 a = 1 // 这一行会插入分号 let b = 2 // 再比如这种情况,你的原意可能是定义 `a` 变量,再执行 `(a + 3).toString()`, // 但是其实 JavaScript 解析器解析成了,`var a = 2(a + 3).toString()`, // 这时会抛出错误 Uncaught TypeError: 2 is not a function var a = 2 (a + 3).toString() // 同理,下面的代码会被解释为 `a = b(function(){...})()` a = b (function(){ ... })()上記はすべて、ルール 1 がヒットせず、セミコロンが挿入されないため、解析が期待と一致しない場合です ルール 3 に基づいた例を見てください。
(() => { return { color: 'white' } })()は color 属性を含むオブジェクトを返すと想定されていますが、実際には return の後にセミコロンが挿入され、最終的には unfineed が返されます。 return 中括弧 {:
(() => { return { color: 'white' } })()セミコロン省略のベスト プラクティス
の直後に配置できます。
不要使用以下单个字符 ( [ / + - 开始一行 , 会极有可能和上一行语句合在一起被解析( ++ 和 -- 不符合单个 +、- 字符)
注意 return break throw continue 语句,如果需要跟随参数或表达式,把它添加到和这些语句同一行,针对 return 返回内容较多的情况 (大对象,柯里化调用,多行字符串等),可以参考规则1,避免命中该规则而引起非预期的分号插入,比如:
return obj.method('abc') .method('xyz') .method('pqr') return "a long string\n" + "continued across\n" + "several lines" totalArea = rect_a.height * rect_a.width + rect_b.height * rect_b.width + circ.radius * circ.radius * Math.PI后缀运算符 ++ -- 需要和操作变量在同一行使用
当然大部分工程化情况下,我们最终会配合Eslint使用带分号或省略分号规范~~~
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!
以上がJavascript セミコロン ルールの知識の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。