JavaScriptで文字列を大文字・小文字交互に変換する方法（ジグザグパターン）

JavaScriptでは、文字列内の偶数番目の文字を小文字に、奇数番目の文字を大文字に変換する「ジグザグパターン」の処理が必要になることがあります。ここでは、そのような変換を行う関数の実装方法を解説します。

実装する関数の仕様

今回作成する関数は、以下の動作を行います。

• 引数として文字列を受け取る
• 偶数番目（インデックスが0, 2, 4…）の文字を小文字に変換
• 奇数番目（インデックスが1, 3, 5…）の文字を大文字に変換
• 変換後の新しい文字列を返す

サンプルコード

const text = 'Hello world, it is so nice to be alive.';

const changeCase = (str) => {
  const newStr = str
    .split("")
    .map((word, index) => {
      if (index % 2 === 0) {
        return word.toLowerCase();
      } else {
        return word.toUpperCase();
      }
    })
    .join("");
  return newStr;
};

console.log(changeCase(text));

コードの解説

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

1. split("")：文字列を1文字ずつ分割して配列に変換します。
2. map()：配列の各要素に対して処理を実行します。インデックスが偶数（index % 2 === 0）ならtoLowerCase()で小文字に、奇数ならtoUpperCase()で大文字に変換します。
3. join("")：処理後の配列を区切り文字なしで連結し、再び1つの文字列に戻します。

なお、JavaScriptのインデックスは0から始まるため、最初の文字は「偶数番目」として扱われ、小文字に変換される点に注意してください。

実行結果

コンソールへの出力結果は以下の通りです。

hElLo wOrLd, It iS So nIcE To bE AlIvE.

まとめ

split・map・joinの3つのメソッドを組み合わせることで、文字列の各文字に対して位置情報（インデックス）を利用した柔軟な変換が可能になります。このテクニックは、大文字小文字の交互変換だけでなく、特定の位置だけ加工したい場合にも応用できるので、ぜひ覚えておきましょう。