文字列を連結する (文字列に文字列を追加する) - JavaScript

JavaScriptで文字列を連結するコードを紹介します。

概要

文字列を連結する場合は "+" 演算子を用います。または、String.concat() メソッドを利用します。

書式

(文字列または文字列変数) + (文字列または文字列変数)

(文字列または文字列変数).concat((文字列または文字列変数))

記述例

"+"演算子

  var str = "北極の" + "しろくま";

  var cstr = str1 + str2;

String.concat() メソッド

  var str = "上野動物園の".concat("アザラシ");

  var cstr = str1.concat(str2);

プログラム例

コード

下記のコードを記述します。

+演算子を利用する例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function buttonClick() {
      var t1 =document.getElementById("textbox1");
      var t2 = document.getElementById("textbox2");
      var cstr = t1.value + t2.value;

      var t3 = document.getElementById("textbox3");
      t3.value = cstr;
    }
  </script>
</head>
<body>
  <input id="textbox1" type="text" /><br/>
  <input id="textbox2" type="text" /><br />
  <input type="button" onclick="buttonClick();" value="Button"/><br/>
  <input id="textbox3" type="text"/>
</body>
</html>

String.concat()メソッドを利用する例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function buttonClick() {
      var t1 =document.getElementById("textbox1");
      var t2 = document.getElementById("textbox2");
      var cstr = t1.value.concat(t2.value);

      var t3 = document.getElementById("textbox3");
      t3.value = cstr;
    }
  </script>
</head>
<body>
  <input id="textbox1" type="text" /><br/>
  <input id="textbox2" type="text" /><br />
  <input type="button" onclick="buttonClick();" value="Button"/><br/>
  <input id="textbox3" type="text"/>
</body>
</html>

解説

ボタンのクリックにより、buttonClick() 関数が実行されます。

    function buttonClick() {
      ......
    }

getElementById() メソッドを呼び出し、IDからテキストボックスの要素を取得します。id="textbox1" のオブジェクトを t1に、id="textbox2"のオブジェクトを t2 に代入します。

  var t1 = document.getElementById("textbox1");
  var t2 = document.getElementById("textbox2");

"+"演算子を利用して、文字列を連結します。textbox1 に入力された文字列は t1.value に、textbox2 に入力された文字列は t2.valueに格納されています。2つの文字列を連結して、 cstr 変数に代入します。~

  var cstr = t1.value + t2.value;

String.concat() メソッドを利用する場合は、文字列型のオブジェクト t1.value のconcat()メソッドを呼び出します。引数にはこのオブジェクトの表現する文字列に追加する文字列の変数(オブジェクト)を与えます。

  var cstr = t1.value.concat(t2.value);

getElementById() メソッドを呼び出し、IDからテキストボックスの要素を取得します。id="textbox3" のオブジェクトを t3 に代入します。t3のvalueプロパティに cstr 変数の内容を代入することで、textbox1, textbox2 に入力された値を連結した、cstr変数の値を textbox3 に表示します。

  var t3 = document.getElementById("textbox3");
  t3.value = cstr;

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

上部のテキストボックスに文字を入力します。入力後[Button]ボタンをクリックします。

下部のテキストボックスに、上部のテキストボックス(textbox1,textbox2)に入力した文字を連結した文字列が表示されます。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次

文字列を連結する (文字列に文字列を追加する) - JavaScript

概要

書式

記述例

"+"演算子

String.concat() メソッド

プログラム例

コード

解説

実行結果

関連するページ