【JavaScript】文字列をカンマで分割し、前後の空白を削除する方法

JavaScriptでカンマ区切りの文字列を配列に分割し、さらに各要素の前後にある余分な空白を取り除きたい場面はよくあります。この記事では、split()メソッドとtrim()メソッドを組み合わせた実装方法を、サンプルコードと実行結果つきでわかりやすく解説します。

処理の流れ

文字列をカンマで分割するには split() を使用し、前後の空白を削除するには trim() を使用します。まずは、カンマと空白が混在した次のような文字列を例に考えてみましょう。

var sentences = "  John ,    David ,         Bob ,      Mike,            Carol        ";

この文字列を split(",") でカンマごとに分割すると配列になりますが、そのままでは各要素に不要な空白が残ってしまいます。そこで map() を使って配列の各要素に trim() を適用することで、きれいなデータを取得できます。

サンプルコード

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

var sentences = "  John , David , Bob , Mike, Carol ";
console.log("元の値=" + sentences);
var result = sentences.split(",").map(function (value) {
    return value.trim();
});
console.log("変更後の値=")
console.log(result);

プログラムを実行するには、次のコマンドを使用します。

node fileName.js.

ここでは、ファイル名を「demo235.js」としています。

実行結果

上記コードの出力は以下のとおりです。

PS C:\Users\Amit\javascript-code> node demo235.js
元の値=  John ,    David ,         Bob ,      Mike,            Carol        
変更後の値=
[ 'John', 'David', 'Bob', 'Mike', 'Carol' ]

実行結果からわかるように、split()でカンマごとに分割した後、trim()によって各要素の前後の空白がすべて削除され、['John', 'David', 'Bob', 'Mike', 'Carol']という整形された配列が得られます。

補足：より簡潔に書く方法

アロー関数を使えば、同じ処理をさらに短く記述できます。

const result = sentences.split(",").map(value => value.trim());

また、ES2019以降の環境であれば trimStart() や trimEnd() を使えば、先頭・末尾どちらか片方だけの空白を削除することも可能です。用途に応じて使い分けるとよいでしょう。