3.7 文字列の連結
「+」という演算子は算術演算子の加算（足し算）に使われますが、文字列を結合するときに使用することもできます。ここでは、文字列連結（結合）としての+演算子の使い方を学習します。
3.7.1 ＋演算子を使用して文字列連結と算術演算子の加算が行われるプログラム
+演算子が「文字列連結」で使われる場合と、「数値同士の計算」で使われる場合の違いを確認してみましょう。
ファイル名 ：plus_operator.html
➢ plus_operator.html
<html>
<head>
<title>算術演算子の優先順位を確認するプログラム</title>
</head>
<body>
<h1>算術演算子の優先順位を確認するプログラム</h1>
<script type="text/javascript">
var i = 3;
var j = 1;
// 文字列連結を使用せずに表示
document.write("1行の文字を");
document.write(i);
document.write("行のプログラムで表示しています。");
document.write("<br>");
// 文字列連結を使用して表示
document.write("実は、" + j + "行のプログラムで表示することも可能です。");
document.write("<br>");
// 四則演算の優先順位ルールによる文字列連結と計算の順序を確認
document.write("i + j = " + i + j);
document.write("<br>");
document.write("i + j = " + (i + j));
</script>
</body>
</html>
実行結果
解説
これまでは、13～15行目までのように、document.writeメソッドを使って複数行の構成で1行の文字列を表示してきました。
図 3.7.1 : 文字列連結を使わない記述
13～15行目で文字列を表示する方法とは異なり、19行目では＋演算子を文字列連結として使い1行で文字列を表示しています。文字列連結を使った場合のイメージを図3.7.2に示します。
図 3.7.2 : 文字列連結として使われている＋演算子
＋演算子を使用し、左右辺のどちらかに文字列が含まれている演算では、＋演算子は文字列連結として使われます。
図 3.7.3 : 複数の＋演算子がある場合の優先順位は左側から先に行う。
“i + j = ” + i + jの答えは、「” i + j = 31″」です。この答えが出る過程を以下に説明します。
23行目は文字列、数値、数値で構成されていて、その３つのデータを２つの+演算子で繋げています。２つの＋演算子がある場合は、左側の+演算子の演算が先に行われるので、上記の図 3.7.3で示すように①、②の順に演算が行われます。
まず①の演算部分を説明します。以下の図3.7.4は上の①演算部分である「”i + j =” + i」を表しています。左辺に文字列があるので、+演算子は加算ではなく文字列連結として作用します。その結果は新しい文字列として「”i+j=3”」となります。
図 3.7.4 : ＋演算子を使った文字列と数値の演算は文字列連結となる。
次に②の演算部分を説明します。ここでは①の演算結果をもとに「”i + j = 3″ + j」という演算を行います。文字列と数値との演算を行うので、ここでも加算ではなく文字列を連結します。その結果、表示されるのは「”i + j = 31″」となります。②の演算部分のイメージを以下の図3.7.5に示します。
図 3.7.5 : ＋演算子を使った文字列と数値の演算は文字列連結となる。
25行目は、括弧演算子を使って計算の順序を変更しています。
図 3.7.6 : 括弧演算子は＋演算子より優先順位が高いので、括弧内の演算を先に行う。
“i + j = ” + (i + j)の答えは、「” i + j = 4″」です。この答えが出る過程を以下に説明します。
25行目は文字列、数値、数値で構成されていて、その３つのデータを２つの+演算子で繋げています。これは先ほど説明した23行目と同じです。しかし、括弧演算子が含まれているところが異なります。括弧演算子は＋演算子より演算が先に行われるので、上記の図 3.7.6で示すように①、②の順に演算が行われます。
まず、①の演算部分を説明します。以下の図3.7.7は25行目の①演算部分である「（i + j）」を表しています。左辺と右辺ともに数値なので、ここでの+演算子は足し算として扱われます。その結果、「4」となります。
図 3.7.7 : +演算子を使った数値と数値の演算は足し算となる。
次に②の演算部分を説明します。ここでは①の演算の結果をもとに「”i + j =” + 4」という演算を行います。文字列と数値との演算を行うので、ここは加算ではなく文字列を連結します。その結果、表示されるのは「”i + j = 4″」となります。
◉ポイント
●演算子の主な優先順位ルール
- ＊演算子と/演算子は、＋演算子と－演算子より優先順位が高いため、先に評価される。
- 括弧演算子は＋演算子、－演算子、＊演算子、/演算子より先に評価される。
- ＋演算子、－演算子 → ＊演算子、/演算子 → 括弧演算子 順に優先順位が高い。
- 優先順位が同じ場合は、左側から右側順に評価される。例えば、＋演算子が２つある場合は左側の＋演算子が先に評価される。
●＋演算子は、左右辺のデータにより、足し算を行う場合と、文字列を連結する場合がある。
- ＋演算子の左右辺どちらかのデータが文字列の場合は、加算ではなく、文字列連結となる。
- ＋演算子の左右辺のデータが数値同士の計算は、足し算になります。