JavaScript 文字列を結合するサンプル

JavaScriptの文字列を結合するサンプルです。

目次

文字列 +演算子で結合する
  代入演算子で結合する(+=)
  文字列を連結する(concat)
  文字列を繰り返す(repeat)
  改行を含んだ文字列
  テンプレート文字列

+演算子で結合する

文字列 + 文字列
<script>
  console.log("あいう" + "えお"); // あいうえお

  console.log("あいう" + 123); // あいう123
</script>

2行目は、+演算子で文字列同士を結合しています。
4行目のように文字列と数値を結合することができます。

代入演算子で結合する(+=)

変数 += 文字列
<script>
  let a = "かきく";
  a += "けこ";

  console.log(a); // かきくけこ
</script>

3行目は、代入演算子(+=)で文字列を結合しています。

文字列を連結する(concat)

str.concat(string2[, string3, ..., stringN])
<script>
  const a = "赤";
  const b = "青";

  console.log(a.concat(b)); // 赤青
  console.log(a.concat("と", b)); //赤と青
  console.log(a.concat("と", b, "です。")); //赤と青です。
</script>

concatメソッドは、引き数を増やすことができ、増やした分結合されます。
concatは連結という意味です。

以下は、MDNのconcatメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat

文字列を繰り返す(repeat)

str.repeat(count)
<script>
  const a = "あ";
  console.log(a.repeat(2)); // ああ

  const b = "あいう";
  console.log(b.repeat(2)); // あいうあいう
</script>

6行目のように複数の文字もまとめて繰り返します。

以下は、MDNのrepeatメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

改行を含んだ文字列

`文字列`
<script>
  const a = `こんにちは
はじめまして`;

  alert(a);
</script>

2,3行目は、改行がある文字列をバックコーテションで囲んでいます。エラーになりません。
5行目のアラートでは、改行されて表示されます。
ECMAScript 2015からできるようになりました。

テンプレート文字列

`文字列${変数}文字列`
  • 文字列をバックコーテーション(`)で括ります。
  • バックコーテーションで括った中で、${変数}と書くことにより変数を展開できます。

テンプレート文字列のサンプルです。

<script>
  const a = "赤";
  console.log(`色は${a}です。`); // 色は赤です。

  const b = 1;
  const c = 2;
  console.log(`1+2は ${b + c}です。`); // 1+2は 3です。
</script>

3行目は、2行目の変数を文字列内で結合して表示しています。
7行目のように、${ }内で計算もできます。

以下は、MDNのテンプレート文字列のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

関連の記事

JavaScript 文字列の一部を取得する(substring)

△上に戻る