JavaScriptで2つの文字列を交互にマージする方法

本記事では、2つの文字列を引数として受け取り、それぞれの文字を交互に組み合わせた新しい文字列を返すJavaScript関数の作成方法を解説します。

例えば、次の2つの文字列が与えられたとします。

const str1 = 'abc';
const str2 = 'def';

期待される出力

この場合、出力は以下のようになります。

const output = 'adbecf';

つまり、str1 の1文字目「a」と str2 の1文字目「d」を連結し、続いて「b」と「e」、「c」と「f」を順番に組み合わせていくイメージです。なお、片方の文字列がもう片方より長い場合でも、余った文字はそのまま末尾に追加される仕様としています。

実装例

実際のコードは以下のとおりです。

const str1 = 'abc';
const str2 = 'def';

const mergeAlternatively = (str1, str2) => {
    const a = str1.split("").filter(el => !!el);
    const b = str2.split("");
    let mergedString = '';
    for (var i = 0; i < a.length || i < b.length; i++) {
        if (i < a.length) {
            mergedString += a[i];
        }
        if (i < b.length) {
            mergedString += b[i];
        }
    }
    return mergedString;
};

console.log(mergeAlternatively(str1, str2));

コードのポイント

• split("") を使うことで、文字列を1文字ずつの配列に分解できます。
• filter(el => !!el) によって空文字を除外し、意図しない文字の混入を防いでいます。
• ループ条件を i < a.length || i < b.length とすることで、長さが異なる2つの文字列にも柔軟に対応できます。
• 各ループ内で a[i] と b[i] の存在チェックを行うことで、配列の範囲外参照を回避しながら交互に文字を連結しています。

実行結果

コンソールには以下のように出力されます。

adbecf