JavaScriptの文字列操作入門｜検索・置換・分割の基本メソッド

JavaScriptの文字列（String）には、検索・置換・分割・結合など多くの便利なメソッドが用意されています。フォーム入力の処理やデータの整形で頻繁に使うメソッドを実践的な例と共に解説します。

基本的な使い方

文字列のメソッドは元の文字列を変更せず、常に新しい文字列を返します。よく使う基本メソッドを紹介します。

JavaScript

const str = "  Hello, JavaScript World!  ";

// 前後の空白を除去
console.log(str.trim());

// 大文字・小文字変換
console.log("hello".toUpperCase());
console.log("HELLO".toLowerCase());

// 文字列の長さ
console.log("こんにちは".length);

// 文字の取得
console.log("JavaScript".charAt(0));
console.log("JavaScript"[4]);
console.log("JavaScript".at(-1)); // ES2022：末尾の文字

実行結果

Hello, JavaScript World!
HELLO
hello
5
J
S
t

検索と判定

文字列内の部分文字列を検索するメソッドは複数あり、用途に応じて使い分けます。

JavaScript

const message = "JavaScriptは楽しい言語です。JavaScriptを学ぼう！";

// 含まれるか判定（boolean）
console.log(message.includes("楽しい"));
console.log(message.includes("難しい"));

// 先頭・末尾の判定
console.log(message.startsWith("Java"));
console.log(message.endsWith("！"));

// 位置の検索（インデックス）
console.log(message.indexOf("JavaScript"));    // 最初の位置
console.log(message.lastIndexOf("JavaScript")); // 最後の位置
console.log(message.indexOf("Python"));         // 見つからない場合

実行結果

true
false
true
true
0
16
-1

置換と分割

replace()で文字列を置換し、split()で文字列を配列に分割できます。

JavaScript

const text = "りんごとバナナとみかん";

// 最初の一致だけ置換
console.log(text.replace("と", "・"));

// すべて置換（replaceAll）
console.log(text.replaceAll("と", "・"));

// 正規表現で置換
const html = "<p>テスト</p><p>データ</p>";
console.log(html.replace(/<\/?p>/g, ""));

// 文字列を分割
const csv = "田中,28,開発部";
const parts = csv.split(",");
console.log(parts);

// 配列を文字列に結合
console.log(parts.join(" | "));

// 指定文字数で分割
const longText = "あいうえおかきくけこ";
console.log(longText.slice(0, 5));
console.log(longText.slice(5));

実行結果

りんご・バナナとみかん
りんご・バナナ・みかん
テストデータ
["田中", "28", "開発部"]
田中 | 28 | 開発部
あいうえお
かきくけこ

実践的な活用例

文字列メソッドはフォーム入力のバリデーションやデータ整形で多用されます。

JavaScript

// メールアドレスのドメイン取得
const email = "user@example.com";
const domain = email.split("@")[1];
console.log("ドメイン:", domain);

// ファイル名と拡張子の分離
const fileName = "report.2024.pdf";
const lastDot = fileName.lastIndexOf(".");
const name = fileName.slice(0, lastDot);
const ext = fileName.slice(lastDot + 1);
console.log("名前:", name, "拡張子:", ext);

// テンプレートリテラルによる文字列生成
const user = { name: "田中", age: 28 };
const greeting = `こんにちは、${user.name}さん（${user.age}歳）`;
console.log(greeting);

// パディング（桁揃え）
console.log("5".padStart(3, "0"));   // 先頭を0埋め
console.log("hi".padEnd(10, "."));   // 末尾を.埋め

// 文字列の繰り返し
console.log("=".repeat(20));

実行結果

ドメイン: example.com
名前: report.2024 拡張子: pdf
こんにちは、田中さん（28歳）
005
hi........
====================

文字列はイミュータブル

JavaScriptの文字列は変更不可（イミュータブル）です。すべての文字列メソッドは元の文字列を変更せず、新しい文字列を返します。str[0] = "x"のような代入はエラーにはなりませんが、効果もありません。

注意点

replace()はデフォルトで最初の一致のみ置換します。すべて置換するにはreplaceAll()または正規表現のgフラグを使ってください。また、split("")はサロゲートペア（絵文字など）を正しく分割できません。[...str]を使う方が安全です。

まとめ

文字列メソッドは常に新しい文字列を返す（イミュータブル）
includes()/startsWith()/endsWith()で判定
replace()/replaceAll()で置換
split()で分割、join()で結合
padStart()/padEnd()で桁揃え