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は連結という意味です。

文字列を繰り返す(repeat)

str.repeat(count)

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

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

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

改行を含んだ文字列(テンプレートリテラル)

`文字列`

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

  alert(a);
</script>

バックコーテションの入力は、shiftを押しながら@を押します。

2,3行目は、改行がある文字列をバックコーテションで囲んでいます。
5行目のアラートでは、改行がある文字列が表示されます。

テンプレートリテラル(テンプレート文字列)で変数を使用

`文字列${変数}文字列`

文字列をバックコーテーション(`)で括り、その中で${変数}と書くと変数を展開できます。
バックコーテションの入力は、shiftを押しながら@を押します。

<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行目のように、${ }内で計算もできます。

関数の実行

以下のようにテンプレート文字列内で関数も実行できます。

<script>
  function calc(num1, num2) {
    return num1 + num2;
  }

  console.log(`数は${calc(1,2)}です。`); // 数は3です。
</script>