JavaScript文字列結合の3つの方法 - 初心者向け完全ガイド

みなさん、JavaScriptで文字列を組み合わせたいと思ったことありませんか？

「ユーザー名と挨拶を組み合わせたい」 「複数の文字列をまとめて表示したい」 「文字列の結合って何通りあるの？」

こんな場面に遭遇することってありますよね。

実は、JavaScriptには文字列を結合する方法が3つあるんです。 それぞれに特徴があって、使い分けることでより効率的なコードが書けます。

この記事では、JavaScriptで文字列を結合する3つの主要な方法について、基本的な使い方から実践的な活用例まで詳しく解説します。 どの方法をいつ使えばいいのかも分かりやすく説明していきますよ。

そもそも文字列結合って何？

簡単に言うとどんなもの？

文字列結合とは、複数の文字列を組み合わせて一つの文字列にする処理のことです。

簡単に言うと、「バラバラの文字を繋げて一つの文章にする」機能なんです。 これにより、動的にメッセージを作成したり、ユーザーの入力を組み合わせた表示を行うことができます。

文字列結合の基本例を見てみよう

最もシンプルな文字列結合の例から見てみましょう。

let firstName = '田中';
let lastName = '太郎';

// 文字列結合の基本
let fullName = firstName + lastName;
console.log(fullName); // '田中太郎'

// スペースを挟んだ結合
let fullNameWithSpace = firstName + ' ' + lastName;
console.log(fullNameWithSpace); // '田中 太郎'

この例では、名前と苗字を組み合わせてフルネームを作っています。 +演算子を使って、文字列同士を繋げることができます。

2つ目の例では、間にスペースを入れて見やすくしています。

方法1: +演算子による結合

基本的な使い方をマスター

最も伝統的で直感的な文字列結合の方法です。

// 基本的な文字列結合
let greeting = 'こんにちは' + '、' + '世界！';
console.log(greeting); // 'こんにちは、世界！'

// 変数を使った結合
let name = '佐藤';
let message = 'おはようございます、' + name + 'さん';
console.log(message); // 'おはようございます、佐藤さん'

// 数値との結合
let age = 25;
let introduction = '私は' + age + '歳です';
console.log(introduction); // '私は25歳です'

+演算子は最もシンプルで分かりやすい方法です。 文字列と文字列を+で繋ぐだけで結合できます。

数値も自動的に文字列に変換されて結合されます。 これはとても便利な機能ですね。

複数行での結合

長い文字列を複数行に分けて結合する方法もあります。

let longMessage = '今日は天気が良いので、' +
                 '公園に散歩に行きましょう。' +
                 'お弁当も持参すると良いかもしれません。';

console.log(longMessage);
// '今日は天気が良いので、公園に散歩に行きましょう。お弁当も持参すると良いかもしれません。'

この方法だと、長い文字列でもコードが見やすくなります。

さらに複雑な例も見てみましょう。

let user = {
    name: '山田花子',
    age: 30,
    city: '東京'
};

let profile = 'ユーザー名: ' + user.name + ', ' +
              '年齢: ' + user.age + '歳, ' +
              '住所: ' + user.city;

console.log(profile); // 'ユーザー名: 山田花子, 年齢: 30歳, 住所: 東京'

オブジェクトのデータを組み合わせてプロフィール文を作成しています。

+演算子の注意点

数値と文字列の結合時には、ちょっと注意が必要です。

// 文字列が含まれると全て文字列結合になる
let result1 = 10 + 20;        // 30（数値の足し算）
let result2 = '10' + 20;      // '1020'（文字列結合）
let result3 = 10 + '20';      // '1020'（文字列結合）
let result4 = 10 + 20 + '30'; // '3030'（まず足し算、その後結合）
let result5 = '10' + 20 + 30; // '102030'（順次文字列結合）

console.log('result1:', result1); // 30
console.log('result2:', result2); // '1020'
console.log('result3:', result3); // '1020'
console.log('result4:', result4); // '3030'
console.log('result5:', result5); // '102030'

文字列が一つでも含まれると、全体が文字列結合になります。 計算の順序によって結果が変わるので、注意が必要ですね。

方法2: テンプレートリテラル（推奨）

基本的な使い方をマスター

ES6で導入された最もモダンな文字列結合の方法です。

// バッククォート（`）を使用
let name = '田中';
let age = 28;

// ${}内に変数や式を記述
let introduction = `私の名前は${name}で、${age}歳です。`;
console.log(introduction); // '私の名前は田中で、28歳です。'

// 式の埋め込み
let price = 1200;
let tax = 0.1;
let total = `合計金額: ${price * (1 + tax)}円`;
console.log(total); // '合計金額: 1320円'

バッククォート（）を使って文字列を囲みます。 ${}`の中に変数や計算式を直接書けるのが便利ですね。

計算も${}の中で行うことができます。

複数行の文字列

テンプレートリテラルの最大の利点の一つです。

let user = {
    name: '佐藤太郎',
    email: 'sato@example.com',
    department: '開発部'
};

// 改行を含む複数行の文字列
let emailTemplate = `
件名: ようこそ、${user.name}さん

${user.name}様

この度は弊社にご入社いただき、
誠にありがとうございます。

所属部署: ${user.department}
メールアドレス: ${user.email}

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

人事部
`;

console.log(emailTemplate);

改行もそのまま反映されるので、メールのテンプレートなどを作るのにとても便利です。

関数呼び出しの埋め込み

テンプレートリテラル内で関数を実行することもできます。

function formatDate(date) {
    return date.toLocaleDateString('ja-JP');
}

function formatCurrency(amount) {
    return `¥${amount.toLocaleString()}`;
}

let orderDate = new Date();
let orderAmount = 15800;

let orderSummary = `
注文確認

注文日: ${formatDate(orderDate)}
金額: ${formatCurrency(orderAmount)}
税込み金額: ${formatCurrency(Math.floor(orderAmount * 1.1))}
`;

console.log(orderSummary);

関数の戻り値も${}の中に直接書けます。 日付のフォーマットや金額の表示なども簡単にできますね。

方法3: concat()メソッド

基本的な使い方をマスター

文字列のメソッドを使った結合方法です。

// 基本的なconcat()の使用
let str1 = 'Hello';
let str2 = 'World';
let result = str1.concat(' ', str2, '!');
console.log(result); // 'Hello World!'

// 複数の文字列を一度に結合
let parts = ['JavaScript', 'は', '素晴らしい', '言語', 'です'];
let sentence = ''.concat(...parts);
console.log(sentence); // 'JavaScriptは素晴らしい言語です'

// メソッドチェーンでの使用
let greeting = 'こんにちは'
    .concat('、')
    .concat('良い天気')
    .concat('ですね！');
console.log(greeting); // 'こんにちは、良い天気ですね！'

concat()メソッドは、元の文字列に対して複数の文字列を一度に結合できます。

スプレッド演算子（...）を使って配列を展開することもできます。 メソッドチェーンで繋げて書くこともできますね。

配列との組み合わせ

concat()メソッドと配列を組み合わせた使用例です。

let baseMessage = 'お疲れ様です';
let recipients = ['田中さん', '佐藤さん', '山田さん'];

// 各受信者への個別メッセージ
recipients.forEach(recipient => {
    let personalMessage = baseMessage.concat('、', recipient);
    console.log(personalMessage);
});
// 'お疲れ様です、田中さん'
// 'お疲れ様です、佐藤さん'
// 'お疲れ様です、山田さん'

配列の各要素に対して同じ処理を行う場合に便利です。

3つの方法を比較してみよう

使い分けのガイドライン

どの方法をいつ使うべきかのガイドラインをまとめました。

基本的な判断基準はこんな感じです。

• シンプルな結合: +演算子
• 変数の埋め込みや複数行: テンプレートリテラル（最もおすすめ）
• 動的な文字列結合: concat()メソッド

実際のコード例で見てみましょう。

// 1. シンプルな結合: +演算子
let simpleConcat = 'Hello' + ' ' + 'World';

// 2. 変数の埋め込みや複数行: テンプレートリテラル（推奨）
let name = '田中';
let complexString = `
こんにちは、${name}さん。
今日はよろしくお願いします。
`;

// 3. 動的な文字列結合: concat()メソッド
let parts = ['a', 'b', 'c'];
let dynamicString = ''.concat(...parts);

基本的にはテンプレートリテラルが最も便利で、多くの場面で使えます。

パフォーマンスについて

簡単なパフォーマンステストも見てみましょう。

// パフォーマンステスト用の関数
function performanceTest() {
    const iterations = 100000;
    let name = '田中';
    let age = 25;
    
    // +演算子のテスト
    console.time('+ operator');
    for (let i = 0; i < iterations; i++) {
        let result = '名前: ' + name + ', 年齢: ' + age;
    }
    console.timeEnd('+ operator');
    
    // テンプレートリテラルのテスト
    console.time('template literal');
    for (let i = 0; i < iterations; i++) {
        let result = `名前: ${name}, 年齢: ${age}`;
    }
    console.timeEnd('template literal');
    
    // concat()のテスト
    console.time('concat method');
    for (let i = 0; i < iterations; i++) {
        let result = '名前: '.concat(name, ', 年齢: ', age);
    }
    console.timeEnd('concat method');
}

// performanceTest(); // 実行してパフォーマンスを確認

一般的に、+演算子とテンプレートリテラルが高速です。 concat()は少し遅い傾向がありますが、通常の使用では気になりません。

実践的な使用例

HTMLの動的生成

HTMLの動的生成での文字列結合の活用例です。

function createUserCard(user) {
    // テンプレートリテラルを使った HTML 生成
    return `
        <div class="user-card">
            <h3>${user.name}</h3>
            <p>年齢: ${user.age}歳</p>
            <p>職業: ${user.occupation}</p>
            <p>メール: ${user.email}</p>
            ${user.isActive ? '<span class="active">アクティブ</span>' : '<span class="inactive">非アクティブ</span>'}
        </div>
    `;
}

// 使用例
let users = [
    { name: '田中太郎', age: 30, occupation: 'エンジニア', email: 'tanaka@example.com', isActive: true },
    { name: '佐藤花子', age: 28, occupation: 'デザイナー', email: 'sato@example.com', isActive: false }
];

users.forEach(user => {
    let cardHTML = createUserCard(user);
    console.log(cardHTML);
});

HTMLの生成にはテンプレートリテラルが最適です。 条件分岐も${}の中で三項演算子を使って書けます。

URLとクエリパラメータの構築

APIエンドポイントやURLの動的構築例です。

class URLBuilder {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
        this.params = {};
    }
    
    addParam(key, value) {
        this.params[key] = value;
        return this; // メソッドチェーン用
    }
    
    build() {
        let paramEntries = Object.entries(this.params);
        
        if (paramEntries.length === 0) {
            return this.baseUrl;
        }
        
        let paramString = paramEntries
            .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
            .join('&');
            
        return `${this.baseUrl}?${paramString}`;
    }
}

// 使用例
let urlBuilder = new URLBuilder('https://api.example.com/search');
let searchUrl = urlBuilder
    .addParam('q', 'JavaScript')
    .addParam('category', 'programming')
    .addParam('limit', 10)
    .build();

console.log(searchUrl);
// 'https://api.example.com/search?q=JavaScript&category=programming&limit=10'

URLの構築にもテンプレートリテラルが便利です。 パラメータの有無によって条件分岐することもできます。

ログメッセージの生成

ログやデバッグメッセージの動的生成例です。

class Logger {
    constructor(component) {
        this.component = component;
    }
    
    log(level, message, data = null) {
        let timestamp = new Date().toISOString();
        
        // テンプレートリテラルを使った構造化ログ
        let logEntry = `[${timestamp}] ${level.toUpperCase()} - ${this.component}: ${message}`;
        
        if (data) {
            logEntry += ` | Data: ${JSON.stringify(data)}`;
        }
        
        console.log(logEntry);
    }
    
    info(message, data) {
        this.log('info', message, data);
    }
    
    error(message, data) {
        this.log('error', message, data);
    }
}

// 使用例
let logger = new Logger('UserService');

logger.info('ユーザーログイン成功', { userId: 123, username: 'tanaka' });
logger.error('データベース接続エラー', { error: 'Connection timeout' });

ログメッセージの生成でも、テンプレートリテラルが威力を発揮します。 条件によって追加情報を含めることも簡単ですね。

安全な文字列結合のコツ

null/undefined対策

安全な文字列結合のための対策例です。

function safeStringConcat(...values) {
    return values
        .map(value => value != null ? String(value) : '')
        .join('');
}

// 使用例
let name = null;
let age = undefined;
let city = '東京';

// 問題のある結合
let badResult = `名前: ${name}, 年齢: ${age}, 住所: ${city}`;
console.log(badResult); // '名前: null, 年齢: undefined, 住所: 東京'

// 安全な結合
let safeResult = `名前: ${name || '未設定'}, 年齢: ${age || '未設定'}, 住所: ${city}`;
console.log(safeResult); // '名前: 未設定, 年齢: 未設定, 住所: 東京'

null や undefined の値がある場合は、デフォルト値を設定することが重要です。 ||演算子を使って、値がない場合の代替値を指定できます。

型変換の明示化

意図しない型変換を防ぐ方法です。

function formatNumber(number) {
    if (typeof number !== 'number' || isNaN(number)) {
        return '無効な数値';
    }
    
    return `数値: ${number.toLocaleString()}`;
}

// 使用例
console.log(formatNumber(1234567)); // '数値: 1,234,567'
console.log(formatNumber('abc')); // '無効な数値'

数値かどうかをチェックしてから処理することで、安全にフォーマットできます。

まとめ

JavaScriptの文字列結合には3つの主要な方法があり、それぞれに適した使用場面があります。

今回学習した内容をまとめると以下の通りです。

• +演算子: シンプルな結合に適している
• テンプレートリテラル: 最もモダンで推奨される方法（変数埋め込み、複数行対応）
• concat()メソッド: 動的な文字列結合やメソッドチェーンに有用

特にテンプレートリテラルは、読みやすくて書きやすいので、積極的に使うことをおすすめします。

文字列結合を適切に使いこなすことで、動的なメッセージ生成、HTML構築、URL作成など、様々な場面で柔軟なプログラムを作成できます。

これらの技術をマスターして、より読みやすく保守性の高いJavaScriptコードを書いてみませんか？