文字列操作と正規表現 — 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**"

// 分割：文字列 → 配列
'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（マッチするか → boolean）
'郵便番号は123-4567です'.match(re); // マッチ部分の情報を返す
 
// すべてのマッチを取り出す（matchAll + g フラグ）
const text = 'tel: 03-1234, 06-5678';
[...text.matchAll(/\d{2}-\d{4}/g)].map((m) => m[0]);
// ["03-1234", "06-5678"]

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