【JavaScript】文字列の偶数番目・奇数番目の文字を分離して入れ替える方法

はじめに

この記事では、JavaScriptで文字列から1文字おき（先頭の文字からスタート）に文字を取り除き、取り除いたすべての文字を文字列の末尾に追加する関数の作り方を解説します。

やりたいこと

たとえば、次のような変換を行います。

入力："This is a test!"
出力："hsi etTi sats!"

これは「0番目・2番目・4番目…」といった偶数インデックスの文字（T、i、空白、s、a、t、s、!）をすべて取り除いて後ろに回し、残りの文字（h、s、i、空白、空白、e、t）を前に置くことを意味します。

実装例

const string = 'This is a test!';
const separateString = (str) => {
    const { first, second } = [...str].reduce((acc, val, ind) => {
        const { first, second } = acc;
        return {
            first: ind % 2 === 1 ? first+val : first,
            second: ind % 2 === 0 ? second+val : second
        };
    }, {
        first: '',
        second: ''
    });
    return first + second;
};
console.log(separateString(string));

コードの解説

• スプレッド構文 [...]： 文字列を1文字ずつの要素を持つ配列に分解します。
• reduce() メソッド： 各文字とそのインデックスを順に走査し、インデックスが偶数なら second に、奇数なら first に連結していきます。
• 戻り値： 最後に first + second の順序で連結した文字列を返します。これにより、元の偶数番目の文字が末尾に移動します。

別のアプローチ：filter() を使う方法

より直感的に書きたい場合は、filter() と join() を組み合わせる方法もあります。

const separateString = (str) => {
    const chars = [...str];
    const odd  = chars.filter((_, i) => i % 2 === 1).join('');
    const even = chars.filter((_, i) => i % 2 === 0).join('');
    return odd + even;
};
console.log(separateString('This is a test!'));

出力

いずれの方法でも、コンソールには次のように表示されます。

hsi etTi sats!

まとめ

文字列を配列化してインデックスの偶奇で振り分けることで、偶数番目・奇数番目の文字を簡単に入れ替えられます。reduce() を使えば1回のループで処理でき、filter() を使うと意図が読みやすいコードになります。用途や可読性の好みに応じて使い分けるとよいでしょう。