Javascript 文字列シングル、ダブルクォーテーションの複合時の法則について

文字列の、シングルクォーテーションとダブルクォーテーションの混合について
どういう法則なのかわかりません。

tag+="<img src='num"+i+".gif' />";

上記の、クォーテーションの割り振り方の法則をわかりやすく教えてください。

お願いします。

Javascript
1<!DOCTYPE html>
2<html>
3<body>
4<script type="text/javascript">
5    var i,tag="";
6    for (i=1;i<=10;i++){
7        tag+="<img src='num"+i+".gif' />"; //　ここのクォーテーションの法則がわかりません。
8    }
9    document.body.innerHTML=tag;
10</script>
11</body>
12</html>

行動規範の内容に同意します

回答2件

法則としては、
"があれば次に（\でエスケープされていない）"が出てくるまでは'は単なる普通の文字
'があれば次に（\でエスケープされていない）'が出てくるまでは"は単なる普通の文字
ということだけです。

投稿2019/11/08 22:47

otn

総合スコア85893

退会済みユーザー

2019/11/08 23:00

ご回答ありがとうございますｍ(__)ｍ

行動規範の内容に同意します

ベストアンサー

まず、共通しているのは文字列と認識させるための記号ということです。
この記号には、ダブルクォート、シングルクォートの2種類、または、バックォートを加えた３種類があると考えます。

ルールとしては

文字列の開始位置の記号と同じ記号で終了位置を示す
記号と同じ記号が含まれる文字列ではエスケープする必要がある (" など)

ダブルクォートとシングルクォートの違いは、プログラミング言語によります。
例えば、Perlという言語では次のような違いがありました（たしかそう。曖昧でごめんなさい）。

ダブルクォートは変数展開できる。
シングルクォートは変数展開できない。

JavaScript では２つとも変数展開する機能は無く、違いも無いように感じますが、
質問コードのように、innerHTML用に与える文字列を生成する場合、属性部分にダブルクォートを含む文字列となるため、エスケープ箇所が増えてしまいます。
ですから、JavaScript ではシングルクォートで統一するといいよね。って習慣もありました。
また、バッククォートも使えるようになった最近のjavascript では乱暴に言うと変数展開できます。

以上のことを踏まえて、次のようになります。

tag+="<img src=\"num" + i + ".gif\" />"; // ダブルクォート
tag+='<img src="num' + i + '.gif" />'; // シングルクォート
tag+=`<img src="num${i}.gif" />`; // バッククォート

だんだんと簡潔に書けるようになっています。

追記）
質問コードはHTML属性値の記述はシングルクォートでも認識されるためですね。

tag+='<img src="num' + i + '.gif" />'; // シングルクォート
tag+="<img src='num" + i + ".gif' />"; // 質問のコード

投稿2019/11/08 22:03

編集2019/11/08 22:36

AkitoshiManabe

総合スコア5434

退会済みユーザー

2019/11/08 22:20

ご回答ありがとうございますｍ(__)ｍ

退会済みユーザー

2019/11/08 22:48

法則についてですが、 tag+="<img src='num"+i+".gif' />";を３つに分割すると、１　"<img src='num" ２　+i+ ３　".gif' />"; に分けられて、１，３で、『ダブルクォートが使えない、内側の場所をシングルクォートで代用している』という認識や法則で合っていますでしょうか？