文字列の連結

広告

「+」演算子は算術演算子の加算や単項演算子としても使われていますが文字列に対して使用すると文字列と文字列を連結する演算子となります。 

文字列1 + 文字列2

次の例を見てください。 

var str;
str = "目覚まし" + "時計";

上記では「目覚まし」と「時計」という2つの文字列を連結しています。文字列を連結するというのは左側の文字列の後ろに右側の文字列をつなげた文字列となります。よって変数strには「目覚まし時計」という文字列が代入されます。

文字列と他の値の連結

「数値 + 数値」の場合は加算された結果となり、「文字列 + 文字列」の場合は文字列が連結されます。では「文字列 + 数値」や「数値 + 文字列」の場合はどうなるのでしょうか。「+」演算子は左辺または右辺の値が文字列であった場合、もう片方の値を文字列に変換して文字列を連結します。

次の例を見てください。 

var str;
str = "200" + 9;

「+」演算子の左辺が文字列なので右辺の数値は文字列に変換されます。よって次のように記述したかのように処理されます。 

var str;
str = "200" + "9";

変数strには「2009」という文字列が代入されます。

文字列連結の順序

「+」演算子の結合規則は左ですので、式の中に複数の「+」演算子が含まれる場合は左から順に連結が行われます。

次の例を見てください。 

var str;
str = 100 + 80 + "$";

この場合、まず100と80の加算が行われます。そして次の「+」演算子の右辺は文字列ですので、先ほどの加算の結果である180と「$」が文字列連結され最終的に変数strには「180$」という文字列が代入されます。

これを次のようにすると処理内容が変わってきます。 

var str;
str = "$" + 100 + 80;

この場合、まず「$」と100の文字列連結が行われます。そして次の「+」演算子の左辺は文字列ですので先ほどの連結の結果である「$100」と80が文字列連結されます。最終的に変数strには「$10080」という文字列が代入されます。

文字列を連結する場合はケアレスミスが発生しやすいので、必要であれば括弧を使うようにして演算の順序を明確にして下さい。先ほどの例は次のように括弧を使うことで先に数値の加算を行うことができます。 

var str;
str = "$" + (100 + 80);

この場合、まず「$」と100と80の加算した結果の文字列連結が行われます。最終的に変数strには「$180」という文字列が代入されます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script16_1.js">
</script>

</body>
</html>

/* JavaScriptサンプル */

document.write("<p>");
document.write(200 + 9 + "<br />");
document.write("200" + 9 + "<br />");
document.write(200 + "9" + "<br />");
document.write("200" + "9" + "<br />");
document.write(100 + 80 + "$" + "<br />");
document.write("$" + 100 + 80 + "<br />");
document.write("$" + (100 + 80) + "<br />");
document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p16-1

( Written by Tatsuo Ikura )