jqueryの変数と文字列の使い方

jQuery
1    var course = $(this).parents('.price-column').find('h2').text();
2    $('#apply-form h2').text('【'+ course +'】お申し込み');
3

上の「'【'+ course +'】お申し込み'」の「【'+ course +'】」の「+ +」は何のためにあるのでしょうか？

変数と文字列を一緒に使っているからでしょうか？

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

回答3件

ベストアンサー

「【'+ course +'】」という区切り方をするとわかりにくくなってしまいそうですが、
文字は ' ' で前後をくくりますから、それを基準に分解して見ましょう。
('【'+ course +'】お申し込み') という（）の中にある塊ですので、分解すると、

「【」という文字･･･ '【'
「 course 」という変数･･･ course
「】お申し込み」という文字･･･ '】お申し込み'

を + で連結しているだけです。

投稿2017/08/12 12:24

kjml

総合スコア219

結合演算子(+)は、複数の文字列を結合するときに使用します。質問文のコードでは、変数courseに代入された文字列の前後に指定した文字列(【と】お申し込み)を連結しています。

質問の主旨から逸れてしまいますが、ES6で利用できるようになったTemplate literalという機能を使うことで結合演算子を使わず、文字列中に変数を埋め込むことが可能です。Template literalは、文字列をシングルクォーテーションやダブルクォーテーションの代わりにバッククォートで囲み、その中に${}で囲んだ式を埋め込めるというものです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<h1></h1>
9<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
10<script>
11    var course = "テキスト";
12    $("h1").text(`【${course}】お申し込み`);
13</script>
14</body>
15</html>

投稿2017/08/12 10:23

編集2017/08/12 10:53

s8_chu

総合スコア14731

＋は文字列を結合するためのものです。
'【course】お申し込み'と書いてしまうと出力はそのまま'【course】お申し込み'と出力されてしまいます。
courseの中身を出力するために、【という文字列と文字列が入っているcourseを連結し、
連結された文字列と】お申し込みという文字列を連結するという動きになっています。
結果、'【'+ course +'】お申し込み'という書き方になります。

投稿2017/08/12 10:20

編集2017/08/12 10:28