フォームの入力値を整える、ファイル名から拡張子を取り出す、カンマ区切りのデータを配列に分ける——こうした処理では、文字列を切り出したり置き換えたりするメソッドが活躍します。JavaScript の文字列には便利なメソッドがそろっており、組み合わせれば多くの加工が短く書けます。この記事では、よく使う slice・substring・replace・replaceAll・split・trim・includes を、動かせるコード例とあわせて解説します。
目次
文字列メソッドは「元を変えない」のが基本
これから紹介するメソッドには大切な共通点があります。それは、元の文字列そのものは変更せず、加工結果を新しい文字列として返すことです（これを「非破壊」と呼びます）。JavaScript の文字列は一度作ると中身を書き換えられない（イミュータブル）ため、加工した値を使いたいときは戻り値を変数に受け取る必要があります。
const original = " Hello ";
const trimmed = original.trim();
console.log(trimmed); // "Hello"（前後の空白が消えた新しい文字列）
console.log(original); // " Hello "（元はそのまま）この前提を踏まえて、それぞれのメソッドを見ていきましょう。
slice で一部を切り出す
slice(開始, 終了) は、開始位置から終了位置の手前までを切り出して返します。位置は 0 から数えます。終了を省略すると最後までになります。マイナスの値を渡すと「末尾から数えた位置」として扱えるのが便利な点です。
const text = "JavaScript";
console.log(text.slice(0, 4)); // "Java"（0〜3文字目）
console.log(text.slice(4)); // "Script"（4文字目から最後まで）
console.log(text.slice(-6)); // "Script"（末尾から6文字）substring との違い
似たメソッドに substring(開始, 終了) があります。基本の動きは slice とほぼ同じですが、マイナスの引数を 0 として扱う点と、開始と終了が逆順だと自動で入れ替える点が異なります。末尾からの切り出しを使いたい場面が多いので、迷ったら slice を選んでおくと扱いやすいです。
replace・replaceAll で置き換える
replace(探す文字列, 置き換える文字列) は、文字列の一部を別の文字列に置き換えます。注意したいのは、文字列を直接指定した場合、最初に見つかった1か所だけが置き換わることです。
const text = "りんご, りんご, みかん";
console.log(text.replace("りんご", "ぶどう"));
// "ぶどう, りんご, みかん"（最初の1つだけ置き換わる）すべての出現箇所を置き換えたいときは replaceAll() を使います。こちらは一致したものをすべて置き換えます。
const text = "りんご, りんご, みかん";
console.log(text.replaceAll("りんご", "ぶどう"));
// "ぶどう, ぶどう, みかん"（すべて置き換わる）なお、replace() の第1引数に正規表現を渡すと、より柔軟なパターンで置換できます。たとえば g フラグ付きの正規表現を渡せば、replace() でもすべてを置き換えられます。
split で文字列を配列に分割する
split(区切り文字) は、指定した区切り文字で文字列を分割し、配列にして返します。カンマ区切りのデータやスペース区切りの単語を扱うときの定番です。
const csv = "田中,佐藤,鈴木";
const names = csv.split(",");
console.log(names); // ["田中", "佐藤", "鈴木"]
console.log(names.length); // 3
// 空文字で区切ると1文字ずつの配列になる
console.log("abc".split("")); // ["a", "b", "c"]逆に、配列を文字列に結合したいときは配列側の join() を使います。split と join はちょうど逆の関係になっていて、セットで覚えておくと便利です。
trim で前後の空白を取り除く
trim() は、文字列の前後にある空白（スペース・タブ・改行など）を取り除きます。フォームに入力された値は前後に余分な空白が入りがちなので、チェックや保存の前に trim() しておくと安心です。
const input = " user@example.com ";
console.log(input.trim()); // "user@example.com"
// 片側だけ取り除く trimStart / trimEnd もある
console.log(" hi ".trimStart()); // "hi "
console.log(" hi ".trimEnd()); // " hi"trim() が取り除くのはあくまで前後の空白だけで、文字列の途中にある空白は残ります。
includes で含まれているか調べる
特定の文字列が含まれているかどうかを調べたいときは includes() を使います。含まれていれば true、なければ false を返すので、条件分岐にそのまま使えます。先頭・末尾を調べる startsWith()・endsWith() もあわせて覚えておくと便利です。
const fileName = "report-2026.pdf";
console.log(fileName.includes("2026")); // true
console.log(fileName.endsWith(".pdf")); // true
console.log(fileName.startsWith("data")); // falseメソッドをつないで使う
これらのメソッドは戻り値が文字列や配列なので、. でつないで続けて呼べます（メソッドチェーン）。たとえば「前後の空白を取り、小文字にそろえてから、ドメイン部分だけ取り出す」処理は次のように書けます。
const raw = " User@Example.com ";
const domain = raw.trim().toLowerCase().split("@")[1];
console.log(domain); // "example.com"各メソッドが元を変えずに新しい値を返すからこそ、こうして安全につないでいけます。
まとめ
文字列の基本操作は、切り出す slice、置き換える replace・replaceAll、分割する split、前後の空白を取る trim、含むか調べる includes で多くをカバーできます。どれも元の文字列を変えずに結果を返すので、加工後の値は戻り値で受け取る、という点だけ押さえておけば安心です。メソッドをつなげば複雑な加工も短く書けるので、用途に合わせて組み合わせてみてください。