JavaScriptで文字列内の各単語を反転させつつ、単語の順序はそのまま維持する方法

本記事では、文字列を引数として受け取るJavaScript関数を作成します。この関数は、文字列内の各単語を個別に反転させる役割を持ちます。ここでいう「単語」とは、両側が空白文字で囲まれている部分文字列、あるいは空白と文字列の先頭・末尾に挟まれた部分文字列を指します。

関数は最終的に、処理後の新しい文字列を返します。

例えば、入力文字列が以下の場合を見てみましょう。

const str = 'This is a string';

このとき、期待される出力は次の通りです。単語の中身だけが反転され、単語同士の順序は元のまま維持されている点に注目してください。

const output = 'sihT si a gnirts';

実装例：ループを使った基本的な方法

まずは、forループを使って各単語を後ろから1文字ずつ読み取り、新しい文字列を組み立てるシンプルな実装です。

const str = 'This is a string';
const reverseWords = (str = '') => {
    const reversed = [];
    str.split(" ").forEach(el => {
        let wordReversed = "";
        for (let i = el.length - 1; i >= 0; i--){
            wordReversed += el[i];
        };
        reversed.push(wordReversed);
    });
    return reversed.join(" ");
};
console.log(reverseWords(str));

出力結果

上記のコードをコンソールで実行すると、以下のように表示されます。

sihT si a gnirts

コードの解説

このコードの処理の流れは以下の通りです。

1. 文字列の分割： str.split(" ") により、元の文字列をスペース区切りで分割し、['This', 'is', 'a', 'string'] という単語の配列を取得します。
2. 各単語の反転： forEach で各単語を順に処理し、forループで末尾の文字から先頭の文字へ向かって1文字ずつ新しい変数 wordReversed に追加していきます。
3. 再結合： 反転済みの単語を配列に格納した後、reversed.join(" ") によってスペース区切りで連結し、目的の文字列を完成させます。

別解：split・reverse・join を組み合わせた簡潔な方法

よりモダンで簡潔に書きたい場合は、配列メソッドをチェーンして使う方法がおすすめです。

const reverseWords = (str = '') => {
    return str.split(' ')
              .map(word => word.split('').reverse().join(''))
              .join(' ');
};
console.log(reverseWords('This is a string'));

こちらの方法では、map 内で各単語を一度文字の配列に分解し（split('')）、reverse() で並べ替えてから（join('')）文字列に戻しています。ロジックが明確で可読性が高いため、実務でもよく使われるパターンです。

どちらのアプローチでも、単語の反転という要件を満たしつつ、単語全体の並び順は元の文字列どおりに保たれます。