JavaScriptにおいて、文字列の操作はプログラミングの基礎であり、避けては通れない重要な要素です。

WebアプリケーションのUI構築やAPIから取得したデータの整形など、文字列を結合する場面は日常的に発生します。

かつては単純な加算演算子を用いた手法が主流でしたが、言語の進化と共に、より安全で可読性の高い方法が登場しました。

本記事では、現代のJavaScript開発において必須となる、効率的な文字列結合のテクニックを具体例と共に紹介します。

目次 [ close ]
  1. 演算子による基本的な文字列結合
    1. プラス演算子（+）の基本
    2. 複合代入演算子（+=）による追記
    3. 注意点：暗黙的な型変換の罠
  2. モダン開発の標準：テンプレートリテラル
    1. テンプレートリテラルの基本構文
    2. 式や関数の埋め込み
    3. 複数行にわたる文字列（マルチライン文字列）
  3. 配列のjoinメソッドによる高度な結合
    1. joinメソッドの使い方
    2. 空文字による無区切り結合
  4. String.prototype.concat() メソッド
    1. concatの基本動作
    2. なぜconcatはあまり使われないのか
  5. パフォーマンスと使い分けの基準
    1. 大量の文字列結合における注意点
  6. 特殊な結合：padStartとpadEnd
  7. よくあるエラーとデバッグ方法
  8. まとめ

演算子による基本的な文字列結合

JavaScriptで最も古くから使われているのが、プラス演算子（+）を用いた結合方法です。

この手法は非常にシンプルであり、小規模なスクリプトや単純なデバッグの際には現在でも頻繁に利用されています。

プラス演算子（+）の基本

複数の文字列を一つの変数にまとめたい場合、対象となる文字列の間に+を配置します。

直感的に理解しやすいため、初学者にとっても馴染みやすい手法と言えるでしょう。

JavaScript
// 名前の姓と名を結合する例
const firstName = "太郎";
const lastName = "山田";
const fullName = lastName + " " + firstName;

console.log(fullName);
実行結果
山田 太郎

複合代入演算子（+=）による追記

既存の文字列変数に対して、後から新しい文字列を追加したい場合には+=演算子が便利です。

ループ処理の中で文字列を少しずつ組み立てる際などに重宝されます。

JavaScript
// メッセージを段階的に構築する例
let message = "こんにちは。";
message += "本日の天気は晴れです。";
message += "良い一日をお過ごしください。";

console.log(message);
実行結果
こんにちは。本日の天気は晴れです。良い一日をお過ごしください。

注意点：暗黙的な型変換の罠

プラス演算子を使用する際には、数値と文字列の混在に細心の注意を払う必要があります。

JavaScriptは動的型付け言語であるため、計算を意図していても、片方のオペランドが文字列であれば全体が文字列として結合されてしまいます。

JavaScript
// 数値と文字列を結合しようとした場合
const age = 25;
const result = "私は" + age + 5 + "歳ではありません。";

console.log(result);
実行結果
私は255歳ではありません。

この例では「25 + 5」が実行されず、「25」という文字列と「5」という文字列がそのまま繋がってしまいます。

意図しない挙動を防ぐためには、事前に数値を計算しておくか、後述するモダンな手法を採用することが推奨されます。

モダン開発の標準：テンプレートリテラル

ES6（ECMAScript 2015）で導入されたテンプレートリテラルは、現代のJavaScript開発において最も標準的な文字列結合の方法です。

従来の演算子を用いた方法に比べて、可読性が飛躍的に向上し、複雑な文字列構築も簡潔に記述できるようになりました。

テンプレートリテラルの基本構文

テンプレートリテラルは、シングルクォートやダブルクォートではなく、バッククォート（`）を使用して文字列を囲みます。

最大の特徴は、${変数名}という形式で、文字列の中に直接変数を埋め込める点にあります。

JavaScript
// テンプレートリテラルを用いた結合
const user = "田中";
const price = 1200;

const receipt = `${user}様、お会計は${price}円になります。`;

console.log(receipt);
実行結果
田中様、お会計は1200円になります。

式や関数の埋め込み

波括弧（${}）の中には、変数だけでなく任意のJavaScript式を記述することが可能です。

計算式や三項演算子、さらには関数の呼び出し結果も直接埋め込めるため、コードを非常にスッキリと保つことができます。

JavaScript
// 式を直接埋め込む例
const a = 10;
const b = 20;

console.log(`合計金額は${a + b}円です（税込：${(a + b) * 1.1}円）。`);
実行結果
合計金額は30円です（税込：33円）。

複数行にわたる文字列（マルチライン文字列）

テンプレートリテラルを使用すると、改行コード（\n）を使わずに、ソースコード上の改行をそのまま文字列として保持できます。

これにより、HTMLテンプレートの作成や、長い文章の構築が驚くほど容易になります。

JavaScript
// 改行を含む文字列の作成
const emailContent = `
お客様へ

いつもご利用いただきありがとうございます。
ご注文いただいた商品は本日発送いたしました。

今後ともよろしくお願いいたします。
`;

console.log(emailContent);
実行結果
お客様へ

いつもご利用いただきありがとうございます。
ご注文いただいた商品は本日発送いたしました。

今後ともよろしくお願いいたします。

配列のjoinメソッドによる高度な結合

大量の文字列を特定の区切り文字で連結したい場合や、配列データを整形する場合には、Array.prototype.join()メソッドが非常に強力です。

テンプレートリテラルよりも、動的なリスト形式のデータを扱う際に威力を発揮します。

joinメソッドの使い方

join()は配列の要素を一つの文字列にまとめ、引数に指定した文字を区切りとして挿入します。

カンマ区切りのテキスト生成や、URLのパス構築などでよく利用されます。

JavaScript
// 配列をカンマで結合する
const tags = ["JavaScript", "React", "Node.js"];
const tagString = tags.join(", ");

console.log(`カテゴリー：${tagString}`);
実行結果
カテゴリー：JavaScript, React, Node.js

空文字による無区切り結合

引数に空文字（""）を渡すと、区切り文字なしで全ての要素を連結できます。

ループ内で+=を使って文字列を組み立てるよりも、一度配列に格納してから最後に一括で結合する方が、パフォーマンス面で有利になるケースがあります。

JavaScript
// 効率的なHTMLリストの構築
const items = ["りんご", "みかん", "ぶどう"];
const listItems = items.map(item => `<li>${item}</li>`).join("");

const html = `<ul>${listItems}</ul>`;

console.log(html);
実行結果
<ul><li>りんご</li><li>みかん</li><li>ぶどう</li></ul>

String.prototype.concat() メソッド

JavaScriptには、文字列を結合するための専用メソッドとしてconcat()も用意されています。

しかし、現代の開発においてこのメソッドが直接選ばれるケースは稀です。

concatの基本動作

concat()は、呼び出し元の文字列に引数で渡された文字列を連結し、新しい文字列を返します。

このメソッドは元の文字列を変更せず、新しいインスタンスを作成します。

JavaScript
// concatメソッドによる結合
const str1 = "Hello";
const str2 = "World";
const result = str1.concat(" ", str2, "!");

console.log(result);
実行結果
Hello World!

なぜconcatはあまり使われないのか

現在、concat()が推奨されない主な理由は、演算子やテンプレートリテラルの方が短く記述でき、パフォーマンス面でも差がないためです。

また、テンプレートリテラルの方が変数の埋め込みにおいて圧倒的に視認性が高いため、あえてconcat()を使うメリットがほとんどありません。

ただし、関数型プログラミングの文脈などで、メソッドチェーンの一環として利用されることはあります。

パフォーマンスと使い分けの基準

状況に応じて最適な手法を選択することは、コードの品質と実行速度の両面に寄与します。

ここでは、代表的な手法の特性を比較表にまとめました。

手法可読性主な用途推奨される場面
+ 演算子中短文の結合非常にシンプルな2つの文字列の連結
テンプレートリテラル高変数埋め込み、複数行現在の標準的な開発全般
join() メソッド高リストの変換配列データを特定のルールで結合する場合
concat()低メソッドベースの結合特定のライブラリや規約がある場合のみ

大量の文字列結合における注意点

数万回といった膨大なループの中で文字列を結合する場合、単純な+演算子による再代入はメモリ効率が悪化する可能性があります。

そのような特殊な状況下では、一度配列に要素をpushし、最後にjoin("")で結合するアプローチが伝統的に高速であるとされてきました。

現代のJavaScriptエンジン（V8など）は非常に高度な最適化を行うため、通常のアプリケーション開発でこの差を意識しすぎる必要はありませんが、知識として持っておくと役に立ちます。

特殊な結合：padStartとpadEnd

結合とは少し異なりますが、特定の長さに達するまで特定の文字を補完するpadStart()やpadEnd()も便利なメソッドです。

日付の「0埋め」や、カード番号の伏せ字表示などで活躍します。

JavaScript
// 日付を2桁で揃える
const day = "5";
const formattedDay = day.padStart(2, "0");

console.log(formattedDay);

// カード番号の一部を隠す
const card = "1234";
const maskedCard = card.padEnd(16, "*");

console.log(maskedCard);
実行結果
05
1234************

これらのメソッドをテンプレートリテラルと組み合わせることで、より柔軟な文字列整形が可能になります。

よくあるエラーとデバッグ方法

文字列結合において最も多いミスは、undefinedやnullが混入することです。

値が未定義の状態で結合を行うと、予期せず「undefined」という文字列が画面に表示されてしまうことがあります。

JavaScript
// 意図しないundefinedの混入
let userName; // 値が未設定
const message = `ようこそ、${userName}さん！`;

console.log(message);
実行結果
ようこそ、undefinedさん！

これを防ぐためには、デフォルト値を設定するか、Null合体演算子（??）を活用することが重要です。

JavaScript
// デフォルト値を適用する
const messageSafe = `ようこそ、${userName ?? "ゲスト"}さん！`;
console.log(messageSafe);
実行結果
ようこそ、ゲストさん！

まとめ

JavaScriptには多様な文字列結合の手法が存在しますが、その中心となるのは間違いなくテンプレートリテラルです。

バッククォートを使用した柔軟な構文は、コードの可読性を高め、メンテナンス性を大幅に向上させます。

一方で、配列データを扱う際のjoin()や、基本に忠実なプラス演算子など、それぞれの強みを理解して使い分けることが重要です。

単に文字列を繋げるだけでなく、型変換のリスクやパフォーマンス、そして将来的なコードの読みやすさを考慮した選択ができるようになりましょう。

今回紹介したモダンなテクニックを駆使することで、あなたのJavaScript開発はより効率的で洗練されたものになるはずです。