JavaScript | 基礎構文：文字列操作 – 結合（concat / +）

JavaScript JavaScript
2025.12.12
スポンサーリンク

文字列の「結合」を一言でいうと

文字列の結合は、
「バラバラの文字列をつなげて、1つの長い文字列を作ること」 です。

JavaScript では主に

  • + 演算子（"A" + "B"）
  • concat メソッド（"A".concat("B")）

の 2 つで結合できますが、
実務ではほぼ +（もしくはテンプレートリテラル）を使います。

ここが重要です。
「結合した結果はいつも“新しい文字列”」。
元の文字列は書き換えられない（イミュータブル）という感覚を、最初にしっかり持っておいてください。

基本：+ 演算子での文字列結合

文字列同士を + でつなぐ

一番よく使うのは + です。

const first = "Hello";
const second = "World";

const message = first + " " + second;

console.log(message); // "Hello World"
JavaScript

"Hello" と "World" の間に " "（スペース）を挟んで結合しています。

変数と文字列リテラルを混ぜて結合

const name = "太郎";
const msg = "こんにちは、" + name + "さん";

console.log(msg); // "こんにちは、太郎さん"
JavaScript

このように、
文字列リテラルと変数を + でどんどんつないでいく のが基本のパターンです。

数値との結合：左側に文字列があると「文字列化」される

const count = 3;
const msg = "残り" + count + "回です";

console.log(msg); // "残り3回です"
JavaScript

"残り" が文字列なので、その後に続く count も
文字列 "3" として扱われて結合 されます。

逆に、数値同士の場合は普通に足し算になります。

console.log(1 + 2);       // 3（数値の足し算）
console.log("1" + 2);     // "12"（文字列結合）
console.log(1 + "2");     // "12"（文字列結合）
JavaScript

どこか 1 つでも文字列が混ざると、
「数値の加算」ではなく 「文字列結合」 に変わる、という点に注意が必要です。

ここが重要です。
+ は「数値の足し算」と「文字列結合」の両方を担当しているので、
片方が文字列かどうかで意味がガラッと変わる。
「今これは足し算になっているのか？ 結合になっているのか？」を意識して使うことがとても大切です。

concat メソッドでの結合

concat の基本的な使い方

concat は、文字列メソッドとして用意されています。

const first = "Hello";
const second = "World";

const message = first.concat(" ", second);

console.log(message); // "Hello World"
JavaScript

first.concat(" ", second) は、
first に " " と second を順にくっつけた新しい文字列 を返します。

複数の引数を一度に結合できる

concat は 1 つずつではなく、複数をまとめて渡せます。

const msg = "".concat("A", "B", "C");
console.log(msg); // "ABC"
JavaScript

とはいえ、"A" + "B" + "C" とほぼ同じ感覚です。

concat も「元の文字列は変えない」

const base = "Hello";
const result = base.concat(" World");

console.log(base);   // "Hello"（元はそのまま）
console.log(result); // "Hello World"
JavaScript

+ のときと同じで、
concat も新しい文字列を返すだけで、元の文字列は変更しません。

ここが重要です。
concat は「+ をメソッドにしたバージョン」のようなもの。
ただし、実務では読みやすさ・書きやすさの面から、ほとんどの場面で +（もしくはテンプレートリテラル）が選ばれます。

実務的には：+ とテンプレートリテラルの使い分け

短い結合なら + で十分

const firstName = "Taro";
const lastName = "Yamada";

const fullName = lastName + " " + firstName;

console.log(fullName); // "Yamada Taro"
JavaScript

短い・シンプルな結合だけなら、+ で書いても十分読みやすいです。

複雑な文章や変数が多いときはテンプレートリテラルが見やすい

const name = "太郎";
const age = 20;
const city = "東京";

const msg1 =
  "こんにちは、" + name + "さん。あなたは" + age + "歳で、" + city + "に住んでいます。";

const msg2 = `こんにちは、${name}さん。あなたは${age}歳で、${city}に住んでいます。`;
JavaScript

msg2 のほうが、文章として自然に読める はずです。

+ で結合しようとすると、

  • どこが文字列の区切りか
  • どこが変数か

が見えにくくなっていきます。

ここが重要です。
シンプルな 2〜3 個の結合なら + で OK。
長い文章を作る・変数が増えてきたら、+ 連発よりテンプレートリテラルのほうがはるかに読みやすく安全です。

「結合」でやりがちなミスと注意点

1: 数値のつもりが、いつのまにか文字列結合になる

const a = 1;
const b = 2;
const c = "3";

console.log(a + b + c); // "33"
JavaScript

a + b → 3（数値）
3 + c → "3" + "3" → "33"

という流れです。

合計値を出したいなら、
そもそも c は数値で持つべきですし、
文字列として来てしまうなら Number(c) や parseInt(c, 10) などで数値に変換してから計算する必要があります。

2: スペースを入れ忘れて、くっつきすぎる

const name = "太郎";
const msg = "こんにちは、" + name + "さんです";

console.log(msg); // "こんにちは、太郎さんです"（OK）
JavaScript

ここで "さんです" の前にスペースを入れ忘れると、
"太郎さんです" になってしまったりします。

スペースも「文字列の一部」なので、
どこに " " を挟むか、常に意識する必要があります。

3: 大量の結合を + でやると読みづらい

const msg =
  "A: " + a +
  ", B: " + b +
  ", C: " + c +
  ", D: " + d;
JavaScript

こういうコードは動きますが、
どこがどの値に対応しているか、一目で分かりにくくなります。

テンプレートリテラルにすると、ぐっと見通しが良くなります。

const msg = `A: ${a}, B: ${b}, C: ${c}, D: ${d}`;
JavaScript

ここが重要です。
+ は便利だけれど、「どこまでが文字列か」「どこからどこまでが変数か」「スペースは入っているか」など、ミスの入り込む余地も大きい。
複雑になってきたら迷わずテンプレートリテラルに切り替えるのが賢いやり方です。

concat と + の違いの整理（知識として）

振る舞いはほぼ同じ

  • どちらも新しい文字列を返す（元は変わらない）
  • どちらも、引数や右側の値を文字列化して結合する

例：

const base = "Hello";

console.log(base + " World");          // "Hello World"
console.log(base.concat(" World"));    // "Hello World"
JavaScript

concat 固有のポイント

  • メソッドなので、必ず「ある文字列」に対して呼び出す
    例："A".concat("B", "C")
  • 配列の concat と名前が同じなので、
    「配列の concat」と混同されやすい（[].concat() もある）

実務的には、
「コードを読んだときに直感的に理解しやすい」 という理由から、
+ やテンプレートリテラルのほうが圧倒的によく使われます。

ここが重要です。
concat は「知っておくと既存コードが読みやすくなる」程度で十分。
自分で新しいコードを書くときは、基本的に + とテンプレートリテラルをメインに使う、というスタンスで問題ありません。

初心者として本当に押さえてほしいこと

最後に、「文字列結合」で大事なポイントをコンパクトにまとめます。

文字列の結合は + か concat で行うが、実務ではほぼ + を使う。
どちらも新しい文字列を返し、元の文字列は変わらない（イミュータブル）。

+ は「数値の足し算」と「文字列結合」の両方に使われる。
どこか一方が文字列なら、結果は文字列結合になる。

短いメッセージなら + で十分だが、
変数や式が多い長い文章はテンプレートリテラル（`...${...}...`）のほうが読みやすい。

スペース " " も文字列の一部なので、結合時にどこで入れるか・入れ忘れていないかに注意する。

ここが重要です。
「これは今、数値の計算なのか？ 文字列の結合なのか？」
「この結合は、+ で書くべきか？ テンプレートリテラルにすべきか？」
と自分に問いかけながらコードを書く癖をつけると、
“なんかおかしい表示” や “計算が文字列になっていたバグ” に、かなり早く気づけるようになります。

簡単な練習として、次のようなコードを書いてみてください。

const name = "太郎";
const age = 20;

// 1. + でメッセージを作る
const msg1 = "名前: " + name + ", 年齢: " + age + "歳";

// 2. テンプレートリテラルで同じメッセージを作る
const msg2 = `名前: ${name}, 年齢: ${age}歳`;

console.log(msg1);
console.log(msg2);
JavaScript

自分の目で見比べて、
「どちらが読みやすいか」「どこでスペースを入れているか」を意識してみると、
文字列結合の感覚がかなりクリアになってくるはずです。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました