文字列操作と正規表現 — replace・split・slice・正規表現の実践ガイド

const s = 'hello';
console.log(typeof s); // "string"（オブジェクトではない）
s.toUpperCase(); // なのにメソッドが呼べる

console.log(String.prototype.hasOwnProperty('toUpperCase')); // true

const original = 'hello';
const upper = original.toUpperCase();
 
console.log(upper); // "HELLO"（新しい文字列）
console.log(original); // "hello"（元はそのまま）

const name = '太郎';
const age = 25;
 
// ❌ + 連結は読みにくい
const a = 'こんにちは、' + name + 'さん（' + age + '歳）';
 
// ⭕ テンプレートリテラル
const b = `こんにちは、${name}さん（${age}歳）`;
 
// 改行もそのまま書ける
const html = `
  <p>${name}</p>
  <p>${age}</p>
`;

const str = 'JavaScript';
 
str.slice(0, 4); // "Java"（0番目から4番目の手前まで）
str.slice(4); // "Script"（4番目から最後まで）
str.slice(-6); // "Script"（末尾から6文字。マイナス指定が便利）
 
str.at(0); // "J"（最初の文字）
str.at(-1); // "t"（最後の文字。str[str.length - 1] より簡潔）

const url = 'https://example.com/users/1';
 
url.includes('users'); // true（含まれるか → boolean）
url.startsWith('https'); // true（前方一致）
url.endsWith('.com'); // false
url.indexOf('users'); // 20（位置。見つからなければ -1）

const text = 'りんご, りんご, みかん';
 
text.replace('りんご', 'ぶどう');
// "ぶどう, りんご, みかん" ← 最初の1件だけ置換される！

const text = 'りんご, りんご, みかん';
 
text.replaceAll('りんご', 'ぶどう');
// "ぶどう, ぶどう, みかん" ← 全部置換される

// 正規表現 + g フラグでも全置換できる（replaceAll が使えない環境向け）
text.replace(/りんご/g, 'ぶどう');

// 2024-01-31 → 2024/01/31 に変換
'2024-01-31'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1/$2/$3');
// "2024/01/31"

// 各単語の先頭を大文字に
'hello world'.replace(/\b\w/g, (char) => char.toUpperCase());
// "Hello World"

'Hello'.toUpperCase(); // "HELLO"
'Hello'.toLowerCase(); // "hello"
 
'  hello  '.trim(); // "hello"（前後の空白を除去）
'  hello  '.trimStart(); // "hello  "
'5'.padStart(3, '0'); // "005"（左を0埋め。ゼロパディングの定番）
'5'.padEnd(3, '*'); // "5**"

'abc'.repeat(3); // "abcabcabc"
'-'.repeat(40); // "----------------------------------------"（区切り線を作る）
'⭐'.repeat(5); // "⭐⭐⭐⭐⭐"（レーティング表示など）

function indent(level) {
  return '  '.repeat(level);
}
indent(3) + 'nested'; // "      nested"

// 分割：文字列 → 配列
'a,b,c'.split(','); // ["a", "b", "c"]
'hello'.split(''); // ["h", "e", "l", "l", "o"]（1文字ずつ）
 
// 結合：配列 → 文字列
['a', 'b', 'c'].join('-'); // "a-b-c"
 
// 組み合わせ：CSVの各値をトリムする
'  a , b , c '
  .split(',')
  .map((s) => s.trim())
  .join(','); // "a,b,c"

const re = /\d{3}-\d{4}/; // 「数字3桁-数字4桁」のパターン（郵便番号など）
 
re.test('123-4567'); // true
re.test('abc-defg'); // false
 
// 実務パターン: メールアドレスの簡易チェック
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRe.test('user@example.com'); // true

// g フラグなし → 最初の1件を詳しく取得
const result = '2024-01-31 の次は 2024-02-01'.match(/(\d{4})-(\d{2})-(\d{2})/);
console.log(result[0]); // "2024-01-31"（マッチ全体）
console.log(result[1]); // "2024"（1番目のキャプチャ）
console.log(result[2]); // "01"
console.log(result.index); // 0（マッチ開始位置）
 
// g フラグあり → すべてのマッチを取り出す（ただしキャプチャは取れない）
'2024-01-31 の次は 2024-02-01'.match(/\d{4}-\d{2}-\d{2}/g);
// ["2024-01-31", "2024-02-01"]

const text = '価格: ¥1,200（税込¥1,320）';
const regex = /¥([\d,]+)/g;
 
// matchAll はイテレータを返すのでスプレッドか for...of で展開する
const matches = [...text.matchAll(regex)];
 
console.log(matches[0][0]); // "¥1,200"（マッチ全体）
console.log(matches[0][1]); // "1,200"（キャプチャグループ）
console.log(matches[0].index); // 4（マッチ開始位置）
 
console.log(matches[1][0]); // "¥1,320"
console.log(matches[1][1]); // "1,320"

const html = '<a href="/about">About</a> と <a href="/contact">Contact</a>';
const linkRe = /<a href="([^"]+)">([^<]+)<\/a>/g;
 
for (const m of html.matchAll(linkRe)) {
  console.log(`URL: ${m[1]}, テキスト: ${m[2]}`);
}
// URL: /about, テキスト: About
// URL: /contact, テキスト: Contact

const log = '[2024-01-15 09:30] ERROR db connection failed\n[2024-01-15 09:31] INFO retry succeeded';
const logRe = /\[(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2})\] (\w+) (.+)/g;
 
const entries = [...log.matchAll(logRe)].map((m) => ({
  date: m[1],
  time: m[2],
  level: m[3],
  message: m[4],
}));
// [{ date: "2024-01-15", time: "09:30", level: "ERROR", message: "db connection failed" }, ...]

const dateStr = '2024-01-31';
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
 
const { groups } = dateStr.match(re);
console.log(groups.year); // "2024"
console.log(groups.month); // "01"
console.log(groups.day); // "31"

const text = '田中太郎 (30歳), 佐藤花子 (25歳)';
const re = /(?<name>\S+)\s*\((?<age>\d+)歳\)/g;
 
const people = [...text.matchAll(re)].map((m) => ({
  name: m.groups.name,
  age: Number(m.groups.age),
}));
// [{ name: "田中太郎", age: 30 }, { name: "佐藤花子", age: 25 }]

'2024-01-31'.replace(
  /(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/,
  '$<y>年$<m>月$<d>日',
);
// "2024年01月31日"

'👨‍👩‍👧'.length; // 8（見た目は1文字なのに）