文字列の分割と結合(split・join)

このレッスンでは、JavaScriptの.split()と.join()を使った文字列の分割・結合を学び、CSVのようなテキストデータを自在に加工できるようになることを目標にします。「JavaScript split join 使い方」で検索している方向けの内容です。

.split(区切り文字)は文字列を配列に分割します。逆に.join(区切り文字)は配列を1つの文字列にまとめます。CSVのようなデータを扱うときによく使います。この2つを組み合わせると、区切り文字を変換したり、余分なスペースを取り除いたりと、テキストデータを自在に加工できるようになります。

サンプルコードでは、カンマ区切りの文字列csvを.split(",")で配列fruitsに分割し、その配列を.join(" / ")で別の区切り文字(スラッシュ)を使った文字列に組み立て直しています。区切り文字を空文字にすれば、文字列を1文字ずつバラバラの配列にすることもできます。

初心者がよくつまずくのが、.split()の引数に指定する区切り文字が、元の文字列に含まれる区切り文字と正確に一致していないと正しく分割できない点です。カンマの後ろに余分な空白があるデータなど、実際のCSVは表記ゆれを含むことが多いため、正規表現を使った分割が必要になる場合もあります。

実際の開発現場では、ファイルの読み込みやAPIレスポンスの処理、フォームで入力されたタグ一覧(カンマ区切り)の解析など、split/joinの組み合わせはテキストデータを扱うあらゆる場面で登場する頻出のテクニックです。

.split()に正規表現を渡すこともでき、「カンマまたは空白で区切る」といった、より複雑なパターンでの分割にも対応できます。表記ゆれの多い実際のデータを扱うときは、こうした柔軟な分割方法も覚えておくと役立ちます。

文字列の中に特定の文字列が含まれているかだけを調べたい場合は、分割せずに.includes()を使う方法もあります。用途に応じて、分割して詳しく処理するか、含まれているかだけを調べるかを選べるようになりましょう。

文字列を1文字ずつの配列にしたいときは.split("")を使いますが、絵文字などの特殊な文字は正しく分割されない場合もあり、より高度な文字列処理ではArray.from()を使う方法も知られています。