JavaScript 文字列を結合する(目的別おすすめ有)

目的別のおすすめ

シンプル	+演算子で結合する
通常で使用	テンプレートリテラル
配列からCSV / path	配列から文字列にする(join)
大量ループ結合	大量ループで文字列を結合するとき(push + join)
使われない	文字列を連結する(concat)

+演算子で結合する

  console.log("ABC" + "DE"); // ABCDE

  console.log("ABC" + 123); // ABC123

文字列と数値の結合もできます。

注意：ループ回数が大量で結合を行う場合、通常の+結合は処理が非常に遅くなります。
→その場合は、配列にセットして最後にjoinします。

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

  let a = "ABC";
  a += "DE";

  console.log(a); // ABCDE

代入演算子(+=)でも文字列を結合できます。

テンプレートリテラル

テンプレート文字列で変数を使用

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

文字列をバックコーテーション(`)で括り、その中で${変数}と書くと変数を展開できます。
バックコーテションの入力は、shiftを押しながら@を押します。
現在のフロントエンド開発（React/Vue/Node.js）では標準です。

  const baseUrl = "https://api.example.com";
  const userId = 111;
  const endpoint = `${baseUrl}/users/${userId}/test`;

  console.log(endpoint); // 出力: https://api.example.com/users/111/test

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

${ }内で計算もできます。

関数の実行

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

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

  console.log(`The total is ${calc(1,2)}.`); // The total is 3.
</script>

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

`文字列`

<script>
  const a = `Hello
World`;

  alert(a);
</script>

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

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

配列から文字列にする(join)

配列からCSVを作成

  const items=["Apple","Banana","Orange"];
  const csv=items.join(",");

  console.log(csv); // Apple,Banana,Orange

配列からpathを作成

  const items=["usr", "local", "bin"];
  const path=items.join("/");

  console.log(path); // usr/local/bin

大量ループで文字列を結合するとき(push + join)

    const lines = [];
    for (let i = 1; i < 101; i++) {
        lines.push(`Line ${i}`);
    }
    const result = lines.join("\n");
    console.log(result); //Line1からLine100まで表示される

大量データの処理では配列にpushでセットして最後にjoinします。

ループ処理の中で+演算子の結合を使用すると都度メモリ確保が発生して遅くなります。

文字列を連結する(concat)

str.concat(string2[, string3, ..., stringN])

<script>
  const a = "red";
  const b = "blue";

  console.log(a.concat(b)); // redblue
  console.log(a.concat("---", b)); //red---blue
  console.log(a.concat("---", b, "***")); //red---blue***
</script>

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