JavaScript文字列の分割（split）の基本と実践
文字列を「区切り文字」で分けて配列にするのが split。CSVの処理、URLやパスの分解、複数行テキストの扱いなどで頻出です。初心者でもすぐ使える定番メソッドです。
概要と構文
// 基本
const parts = str.split(separator, limit);
- separator: 区切り文字または正規表現。省略すると「文字列全体を1要素の配列」で返す。
- limit: 返す要素数の上限（任意）。指定数を超える部分は切り捨てられる。
- 返り値: 分割結果の配列。元の文字列は変更されない。
基本例（まずはここから）
// カンマで分割
"a,b,c".split(","); // ["a", "b", "c"]
// 区切り文字を省略（そのまま1要素）
"a,b,c".split(); // ["a,b,c"]
// 空文字で分割（1文字ずつ）
"abc".split(""); // ["a", "b", "c"]
// limitで要素数を制限
"a,b,c,d".split(",", 2); // ["a", "b"]
- ポイント: 区切り文字は自由に指定可能。空文字なら「一文字ずつ」、limitで「欲しい数だけ」取得できる。
実用テンプレート（すぐ使える定番）
// 1) CSVの1行を配列化（簡易）
const row = "Aki,22,Tokyo";
const cols = row.split(",");
console.log(cols); // ["Aki", "22", "Tokyo"]
// 2) パスやURLを分割
const path = "/users/123/profile";
const segments = path.split("/");
console.log(segments); // ["", "users", "123", "profile"]
// 3) 改行で複数行テキストを配列化
const text = "Line1\nLine2\nLine3";
const lines = text.split("\n");
console.log(lines); // ["Line1", "Line2", "Line3"]
// 4) Windowsの改行（\r\n）に対応して行分割
const windowsText = "Line1\r\nLine2\r\nLine3";
const lines2 = windowsText.split(/\r?\n/);
console.log(lines2); // ["Line1", "Line2", "Line3"]
// 5) 空白で単語分割（複数空白やタブもまとめて扱う）
const sentence = "Hello world\tJS";
const words = sentence.trim().split(/\s+/);
console.log(words); // ["Hello", "world", "JS"]
- ポイント: 改行は環境で異なるため正規表現
/\r?\n/を使うと安全。空白分割は/\s+/で連続空白をまとめるのが定番。
正規表現の活用（柔軟な分割）
// 1) いずれかの区切り（カンマ or セミコロン）
"a,b;c".split(/[;,]/); // ["a", "b", "c"]
// 2) 数字の境界で分割（例：文字と数字の境で）
"ID123User456".split(/(?=\d)/); // ["ID", "123User", "456"]
// 3) 区切りの連続を1つにまとめる（縦横無尽な区切り）
"a,,b;;;c".split(/[;,]+/); // ["a", "b", "c"]
// 4) 区切りを含めず・含めて扱う（先読み/後読み）
"2025-12-04".split(/-/); // ["2025", "12", "04"]
"2025-12-04".split(/(?=-)/); // ["2025", "-12", "-04"] // 区切り直前で分割（区切りを次要素に残す）
- ポイント: 複数種類の区切りは文字クラス
[ ... ]、連続区切りは量指定子+、区切り保存は先読み/後読みで調整。
よくある落とし穴と対策
- 連続する区切りが空要素を生む:
- 例:
"a,,b".split(",") // ["a", "", "b"] - 対策: 正規表現
/,+/で連続区切りをまとめる、または filter で空要素を除去。
- 例:
- 前後の空白が混ざる:
- 対策: trim() してから分割、または
/\s*,\s*/のように空白も含めて区切る。
- 対策: trim() してから分割、または
- オブジェクトへ直接は渡せない:
- 対策: 分割後に map で型変換（数値化や整形）してから使う。
- CSVの厳密対応が必要:
- 例: 値にカンマや改行、ダブルクォートが含まれると素朴なsplitでは壊れる。
- 対策: 厳密なCSVは専用パーサの利用を検討（自作する場合はクォートとエスケープの対応が必要）。
- 改行コードの違いに未対応:
- 対策:
/\r?\n/を使って Windows/macOS/Linux すべてをカバー。
- 対策:
練習問題（手を動かして覚える）
- 基本のカンマ分割:
console.log("red,blue,green".split(",")); // ["red","blue","green"]
- 複数空白をまとめて単語分割:
console.log("A B\tC".split(/\s+/)); // ["A","B","C"]
- カンマとセミコロンのどちらでも分割:
console.log("a,b;c;d".split(/[;,]/)); // ["a","b","c","d"]
- 空要素を除いて分割:
const parts = "a,,b,,,c".split(",").filter(x => x !== "");
console.log(parts); // ["a","b","c"]
- 行分割（改行差対応）して行番号を付与:
const text = "L1\r\nL2\nL3";
const numbered = text.split(/\r?\n/).map((line, i) => `${i+1}: ${line}`);
console.log(numbered);
// ["1: L1","2: L2","3: L3"]