JavaScriptで文字列から空白を除去し、カンマ区切りで分割して配列を作成する方法

文字列のトリミングと分割による配列の生成

たとえば、次のように空白を含むカンマ区切りの文字列があったとします。

const str = "a, b, c, d , e";

ここで求められているのは、このような文字列を受け取って、含まれるすべての空白文字（ホワイトスペース）を除去し、その後カンマを区切り文字として文字列を分割して、リテラルの配列を作成して返すJavaScript関数です。

実装例

コードは以下のようになります。

const str = "a, b, c, d , e";
const shedAndSplit = (str = '') => {
    const removeSpaces = () => {
        let res = '';
        for(let i = 0; i < str.length; i++){
            const el = str[i];
            if(el === ' '){
                continue;
            };
            res += el;
        };
        return res;
    };
    const res = removeSpaces();
    return res.split(',');
};
console.log(shedAndSplit(str));

処理の流れ

この関数では、内部関数 removeSpaces() が for ループを使って文字列を1文字ずつ走査し、空白文字に該当する要素は continue でスキップしながら新しい文字列を組み立てます。これにより、元の文字列から空白だけが取り除かれます。

その後、split(',') メソッドによってカンマを基準に文字列が分割され、余計な空白を含まないきれいな配列が返されます。

出力結果

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

[ 'a', 'b', 'c', 'd', 'e' ]

正規表現を使った簡潔な代替案

よりシンプルに記述したい場合は、replace() メソッドと正規表現を組み合わせる方法も有効です。

const shedAndSplitSimple = (str = '') => str.replace(/\s+/g, '').split(',');
console.log(shedAndSplitSimple(str)); // [ 'a', 'b', 'c', 'd', 'e' ]

/\s+/g は「1文字以上の連続する空白」に一致する正規表現で、タブや改行などもまとめて除去できるため、実務ではこちらの方が短く堅牢なコードになります。