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

今回求められているのは、2つの文字列を受け取り、最初の文字列から2文字、次に2番目の文字列から2文字、また最初の文字列から…という具合に交互に文字を取り出して、新しい文字列を作成して返すJavaScript関数です。

たとえば、入力が次の2つの文字列だったとします。

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

このとき、期待される出力は次のようになります。

const output = 'HeHollw o arwoe rlyodu btw';

実装コード

それでは、この関数を実際にコードにしてみましょう。

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));

出力結果

コンソールには次の出力が表示されます。

HeHollw o arwoe rlyodu btw

コードの解説

この関数の動きを、ステップごとに整理してみます。

• i と j の役割：それぞれ第1・第2引数の文字列における「現在の読み取り位置」を管理するインデックスです。
• 交互の切り替え：ループカウンタ ind を2で割った余り（ind % 2）が0かどうかで、偶数回は str1 から、奇数回は str2 から2文字ずつ取り出す番を交互に切り替えています。
• 安全な2文字取得：(str[i] || '') + (str[i + 1] || '') の形式により、文字列の終端を超えるアクセスで undefined が混ざるのを防ぎ、存在しない位置は空文字列として扱われます。
• 残りの処理：str1 側のループ条件（i < str1.length）が満たされなくなるとループを抜け、str2 にまだ残っている文字を while 文で一括して末尾に連結します。

なお、このアルゴリズムの計算量は、両文字列の長さの合計に対して線形時間 O(n + m) となり、非常に効率的です。

より簡潔な代替実装：slice() を使う方法

String.prototype.slice() を利用すると、範囲外アクセス時に自動的に空文字列が返されるため、境界チェックを明示的に書く必要がなくなり、より読みやすいコードになります。

const twiceJoin = (str1 = '', str2 = '') => {
   let res = '';
   for (let k = 0; k < Math.max(str1.length, str2.length); k += 2) {
      if (k < str1.length) res += str1.slice(k, k + 2);
      if (k < str2.length) res += str2.slice(k, k + 2);
   }
   return res;
};

こちらも先ほどの実装とまったく同じ出力（'HeHollw o arwoe rlyodu btw'）を返します。可読性を重視したい場合は、こちらの書き方を選ぶとよいでしょう。