JavaScriptで2つの文字列を2文字ずつ交互に結合する方法

2つの文字列を引数として受け取り、1つ目の文字列から2文字、次に2つ目の文字列から2文字、また1つ目、2つ目と交互に取り出して、新しい文字列を作成して返すJavaScript関数を書いてみましょう。

例えば、次の2つの文字列が与えられた場合を考えてみます。

const str1 = 'Hello world';
const str2 = 'How are you btw';

この場合、期待される出力は次のとおりです。

const output = 'HeHollw o arwoe rlyodu btw';

「He」「Ho」「ll」「w 」というように、各文字列から2文字ずつ順番に取り出しながら連結していくイメージです。それでは、この関数のコードを実際に書いていきましょう。

コード例

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

const str1 = 'Hello world';
const str2 = 'How are you btw';
const twiceJoin = (str1 = '', str2 = '') => {
    let res = '', i = 0, j = 0, temp = '';
    for(let ind = 0; i < str1.length; ind++){
        if(ind % 2 === 0){
            temp = (str1[i] || '') + (str1[i+1] || '')
            res += temp;
            i += 2;
        }else{
            temp = (str2[j] || '') + (str2[j+1] || '')
            res += temp;
            j += 2;
        }
    };
    while(j < str2.length){
        res += str2[j++];
    };
    return res;
};
console.log(twiceJoin(str1, str2));

このコードの仕組みを簡単に解説します。ループのカウンターである変数 ind が偶数のときは1つ目の文字列から2文字を、奇数のときは2つ目の文字列から2文字を取り出して、結果の文字列 res に追加していきます。(str[i] || '') としているのは、文字列の長さを超えて参照した場合に undefined が連結されるのを防ぐためです。1つ目の文字列がすべて処理された後は、whileループで2つ目の文字列の残りをそのまま連結して完了です。

出力

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

HeHollw o arwoe rlyodu btw

このように、2つの文字列の長さが異なる場合でも、短い方の文字列を使い切った後に残りをそのまま連結することで、正しく結合された文字列を取得できます。