JavaScriptでキャメルケース文字列を任意の区切り文字で分割する方法

はじめに

本記事では、第一引数に文字列、第二引数に区切り文字（セパレーター）を受け取るJavaScript関数の実装方法を解説します。入力される文字列は必ずキャメルケース（camelCase）形式であると想定し、関数は指定された区切り文字で単語を分割し、すべて小文字に変換した新しい文字列を返します。

処理内容の確認

たとえば、入力文字列と区切り文字が以下だった場合を考えてみましょう。

const str = 'thisIsAString';
const separator = '_';

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

const output = 'this_is_a_string';

つまり、大文字の直前で文字列を区切り、各単語を小文字化して「_」で連結すればよいことになります。

サンプルコード

以下が実際のコードです。

const str = 'thisIsAString';
const separator = '_';

const separateCase = (str = '', separator = ' ') => {
  const arr = [];
  let left = 0, right = 0;
  for(let i = 0; i < str.length; i++){
    const el = str[i];
    const next = str[i + 1];
    if((el.toUpperCase() === el && el.toUpperCase() !== el.toLowerCase()) || !next){
      right = i + Number(!next);
    };
    if(left !== right){
      const sub = str.substring(left, right).toLowerCase();
      arr.push(sub);
      left = right;
    };
  };
  return arr.join(separator);
};

console.log(separateCase(str, separator));

コードのポイント

• 2つのポインターで走査： 変数leftとrightを使い、単語の開始位置と終了位置を管理しながら文字列を1文字ずつチェックしていきます。
• 大文字の正確な判定： el.toUpperCase() === el && el.toUpperCase() !== el.toLowerCase()という条件式により、英字の大文字だけを確実に検出できます。数字や記号が混在していても誤動作しません。
• 末尾への対応： ループが最後の文字に到達すると!nextが真になるため、最後の単語も漏れなく切り出せます。
• 連結して返却： 切り出した各単語をtoLowerCase()で小文字化して配列に格納し、最後にjoin(separator)で指定の区切り文字を挟んで連結します。

出力結果

コンソールには以下のように表示されます。

this_is_a_string

応用：正規表現を使った簡潔な書き方

同じ処理は、正規表現を活用するとより短く記述することもできます。

const separateCaseRegex = (str = '', separator = ' ') => {
  return str.replace(/([A-Z])/g, `${separator}$1`).toLowerCase();
};

console.log(separateCaseRegex('thisIsAString', '_')); // this_is_a_string

こちらは大文字の直前に区切り文字を挿入してから、文字列全体を一括で小文字化するアプローチです。コード量が少なく読みやすいため、可読性や保守性を重視する場面では特に有効でしょう。

まとめ

キャメルケースの文字列をスネークケースなど任意の形式へ変換する処理は、実際の開発でも頻繁に登場します。ポインターを使った手続き的な方法と、正規表現による宣言的な方法の両方を理解しておけば、状況に応じて最適な実装を選択できるようになります。ぜひ本記事のコードを参考にしてください。