javascript 表記の意味

Question

$(function(){
	$(":radio").click(function(){
		$("label").css("font-weight","");
		$("label[for='"+$(this).attr("id")+"']").css("font-weight","bold");
	});
	$("label").click(function(){
		$("label").css("font-weight","");
		$(this).css("font-weight","bold");
	});
});

		性別:
		<input type="radio" name="gender" value="男性" id="gender_man" />
		<label for="gender_man">男性</label>
		<input type="radio" name="gender" value="女性" id="gender_woman" />
		<label for="gender_woman">女性</label>

当javascriptの動作は理解しているのですが、**$("label[for='"+$(this).attr("id")+"']")の部分のイコールのすぐ次の'（シングルクォーテーション）と"（ダブルクォーテーション）と+（プラス）**で大括弧の手前までを囲んでいる理由（意味、使い方）が解りません。
当コードでの各意味を文章（言葉）でご説明頂ける方おりましたらよろしくお願い致します。
（返信が明日以降になる可能性があることご了承頂けますと幸いです。）

Answer 1

文字列リテラル

シングルコーテーション、ダブルコーテーションで括られた文字列は文字列リテラルとして扱います。

• String - JavaScript | MDN

+ 演算子

+ 演算子は文字列を対象にとる場合、文字列結合の処理を行います。

• 式と演算子 - JavaScript | MDN

言葉で説明するよりも、実際に動かしてみる方が、より分かりやすいと思います。

var world = 'World!';

console.log("Hello, " + world);// "Hello, World!"

Re: solashiro さん

Comments

[y_shigoto]

参考やコードも頂きありがとうございます。返信が遅くなりすみません。
「+」が文字列を連結するものだということは理解しているのですが、何故必要なのかが分かりません。

$("label[for='$(this).attr("id")']")

では駄目なのでしょうか？

[think49]

文字列リテラルは変数を展開しません。
繰り返しますが、実際に動かしてみる方が、より分かりやすいと思います。
疑問に思ったことは全て試して下さい。

[y_shigoto]

ご返信ありがとうございます。

$("label[for='$(this).attr("id")']")
で試して動作に変化が無かったので再度質問させて頂いた次第でした。
お手数お掛けし失礼しました。

[think49]

> $("label[for='$(this).attr("id")']")

そもそも、SyntaxErrorになるはずですが…。
コンソールを確認してください。

本番コードにそのまま適用するのではなく、小さなテストコードを繰り返し書いて、覚えるべきだと思います。

想像や感覚で書いているように見えるので、その手の思い込みを排除して、頭をまっさらにしてリファレンスを読むことも重要かと。
紹介したMDNを踏まえて、コードを書いているようには見えませんでした。
(文字列リテラルに、あなたが書いたような書き方があるとは説明されていませんので…。)

[y_shigoto]

わざわざご返信下さりありがとうございます。
再度試してみたら、仰る通りエラーでした。
エディタとブラウザのリンクに不具合があったようです。
大変失礼致しました。
その後色々と調べて解決した為、併せて回答も編集致しましたので、一応ご報告させて頂きます。
回答の説明でお分かり頂けるかと思いますが、そもそもとてもレベルの低い質問で、質問の仕方も悪かったと思います。まだ学習始めたばかりで稚拙な箇所が多々あるので、頂いたアドバイス等を参考に理解を深め、ご回答下さる方にきちんと伝わるような質問が出来るようになるよう努めます。
学習方法までアドバイスして頂き、本当にありがとうございました。

Answer 2

ブラスは文字列の連結を意味します。
例えば、
a="は";
text="みかん"+a+"おいしい";

なら、
text=="みかんはおいしい"
になります。

よって

"label[for='"+$(this).attr("id")+"']"は、
a="label[for='";
b=$(this).attr("id");
c="']";
という三つの文字列を「a+b+c」、と連結した形になります。

つまり、"label[for='{クリックされた要素のid}']"
ということになります。

Comments

[y_shigoto]

早くにご回答頂いており、ありがとうございました。返信が遅くなりすみません。
「+」が文字列を連結するものだということは理解しているのですが、何故必要なのかが分かりません。

$("label[for='$(this).attr("id")']")

では駄目なのでしょうか？

[aoies]

文字列中では変数は展開されません。
さっきの例で言えば、
a="は";
text="みかん"+a+"おいしい";
text2="みかん'a'おいしい";
とした時、
text=="みかんはおいしい"
text2=="みかん'a'おいしい"
となります。
つまり文字列中の変数名は変数名としては扱われません。関数名も同様です。
"label[for='$(this).attr("id")']"だと、
"label[for='{クリックされた要素のid}']"とは変換されず、
"label[for='$(this).attr("id")']"というそのままの文字列として扱われます。

[aoies]

"label[for='"+$(this).attr("id")+"']"を使った場合。
→https://jsfiddle.net/mqjt23yx/
"label[for='$(this).attr("id")']"を使った場合。
https://jsfiddle.net/mqjt23yx/1/

動作はおんなじにはならないと思いますが。
(2つ目では男性、女性を選択しても文字は太字にならない。)

[y_shigoto]

わざわざご返信下さりありがとうございます。
再度試してみたら、仰る通り同動作は行われませんでした。
エディタとブラウザのリンクに不具合があったようです。
大変失礼致しました。
その後色々と調べて解決した為、併せて回答も編集致しましたので、一応ご報告させて頂きます。
回答の説明でお分かり頂けるかと思いますが、そもそもとてもレベルの低い質問で、質問の仕方も悪かったと思います。まだ学習始めたばかりで稚拙な箇所が多々ある為、もっと理解を深め、ご回答下さる方にきちんと伝わるような質問が出来るように努めます。
初回からとても丁寧で解りやすいご説明ありがとうございました。自分で調べて解決したものと照合しながら確認出来て理解を深められたのでとても参考になり助かりました。

Answer 3

命令（「$(this).attr("id")」の部分）が固定条件でない為「”（又は’）」と「+」で囲むルール
である。