← カテゴリ一覧に戻る

文字列の加工

slice split replace template literal

文字列の整形・変換・抽出操作のパターンをまとめます。正規表現との組み合わせも重要です。

デモ：文字列操作をリアルタイム確認

trimHello, World! This is a TEST string.
upper HELLO, WORLD! THIS IS A TEST STRING.
lower hello, world! this is a test string.
splitHello, / World! / This / is / a / TEST / string.
replace Hello, World! This is a ✅REPLACED string.
sliceHello, Wor...
includestrue
startsWithtrue

コード例：主要な文字列メソッド

js
const str = "  Hello, World!  ";

// 空白除去
str.trim();             // "Hello, World!"
str.trimStart();        // "Hello, World!  "（先頭のみ）
str.trimEnd();          // "  Hello, World!"（末尾のみ）

// 大文字・小文字
str.toUpperCase();      // "  HELLO, WORLD!  "
str.toLowerCase();      // "  hello, world!  "

// 抽出
str.slice(2, 7);        // "Hello"
str.slice(-1);          // "!" （末尾から）
str.substring(2, 7);    // "Hello"（マイナス不可）

// 検索
str.includes("World");  // true
str.startsWith("  H");  // true
str.endsWith("!  ");    // true
str.indexOf("o");       // 4（最初のindex）
str.lastIndexOf("o");   // 9（最後のindex）

// 分割・結合
str.trim().split(", ");  // ["Hello", "World!"]
["a", "b"].join("-");    // "a-b"

// 置換
str.replace("World", "JavaScript"); // 最初の1つ
str.replaceAll("l", "L");           // 全て置換
// 正規表現（大文字小文字無視）
str.replace(/world/i, "JS");

// 繰り返し・埋め込み
"ab".repeat(3);          // "ababab"
"5".padStart(3, "0");    // "005"（左埋め）
"5".padEnd(3, "0");      // "500"（右埋め）

// テンプレートリテラル
const name = "Alice";
const age = 30;
`名前: ${name}, 年齢: ${age}歳`;  // "名前: Alice, 年齢: 30歳"
`計算: ${1 + 2}`;                  // "計算: 3"（式も評価）

正規表現との組み合わせ

js
// match：マッチした部分を配列で取得
"test@example.com".match(/[a-z]+@[a-z]+\.[a-z]+/);

// matchAll：全マッチを取得
const text = "apple, banana, apple";
[...text.matchAll(/apple/g)].length; // 2回マッチ

// test：マッチするか確認
/^\d{3}-\d{4}$/.test("123-4567"); // true（電話番号）

// よく使う正規表現パターン
const patterns = {
  email:    /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
  phone:    /^\d{2,4}-\d{2,4}-\d{4}$/,
  zipCode:  /^\d{3}-\d{4}$/,
  url:      /^https?:\/\/.+/,
  onlyNum:  /^\d+$/,
  hiragana: /^[\u3041-\u3096]+$/,
};

NEWString.raw / Temporal / Unicode 改善（最新動向）

js
// String.raw：バックスラッシュをエスケープしない
String.raw`C:\Users\Alice`; // "C:\Users\Alice"（生文字列）

// isWellFormed / toWellFormed（ES2024）
// サロゲートペアの不正な文字列を安全に処理
"hello\uD800".isWellFormed();     // false（孤立サロゲート）
"hello\uD800".toWellFormed();     // "hello\uFFFD"（置換）

// Intl.Segmenter：絵文字・漢字を正しく分割
const segmenter = new Intl.Segmenter('ja', { granularity: 'word' });
[...segmenter.segment("日本語テキスト")].map(s => s.segment);

// Unicode プロパティエスケープ（正規表現）
/\p{Script=Hiragana}/u.test("あ"); // true

🤖 AIプロンプトテンプレート

以下のようなJavaScriptの文字列メソッドを使った文字列処理のサンプルコードを生成してください：
- split / join / slice / substrを使った文字列の分割・抽出・結合
- replace / replaceAllと正規表現を組み合わせた文字列置換
- trim / trimStart / trimEndを使った空白除去とpadStart / padEndによる文字埋め
- includes / startsWith / endsWith / indexOfを使った文字列検索
- テンプレートリテラルとString.rawを使った文字列生成パターン

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo