【JavaScript入門】stringのメソッド

　JavaScript の String オブジェクト には、Web アプリ開発で頻出する「検索」「抽出」「整形」「分割」などを一行でこなすメソッドが多数そろっています。ここでは 正規表現系を除く 代表的なメソッドを体系化し、実践的な HTML＋JavaScript サンプルを通じて使い方を解説します。

１．文字単位の操作

構文 / メソッド	戻り値	特徴
`str[n]`	文字	添字で取得。UTF‑16 単位
`str.charAt(n)`	文字	上と同等。範囲外は空文字
`[...str]`	配列	スプレッド構文。サロゲートペアも 1 要素
`String.fromCharCode(...codes)`	文字列	文字コード (UTF‑16) から生成
`String.fromCodePoint(...pts)`	文字列	コードポイント (Unicode) から生成
`str.charCodeAt(n)`	数値	UTF‑16 1 単位を返す
`str.codePointAt(n)`	数値	1 文字のコードポイントを返す

1.1. 例 ― 絵文字を安全に 1 文字扱い

ファイル名： emoji_splitter.html

<!-- ファイル名: emoji_splitter.html -->
<!DOCTYPE html><html lang="ja"><meta charset="utf-8">
<body>
<p id="out"></p>
<script>
(() => {
  const msg = '🍓苺ケーキ🍰うまい';
  const chars = [...msg];        // サロゲートペアを分離しない
  const codes = chars.map(c => c.codePointAt(0).toString(16));

  const p = document.getElementById('out');
  p.textContent = `文字数=${chars.length} / コードポイント=${codes.join(',')}`;
  console.log(chars);            // ["🍓","苺","ケ","ー","キ","🍰","う","ま","い"]
})();
</script>
</body>
</html>

デバックコンソールの出力

(9) ['🍓', '苺', 'ケ', 'ー', 'キ', '🍰', 'う', 'ま', 'い']

　ブラウザには 文字数=9 / コードポイント=1f353,82b1,30b1,30fc,30ad,1f370,3046,307e,3044 と表示され、Console には 1 文字ずつの配列が出力されます。

[...msg] がサロゲートペアを自動結合
codePointAt() で絵文字も正しい 16 進コードを取得

２．検索・抽出系メソッド（正規表現なし版）

メソッド	戻り値	用途
`includes(substr, from)`	真偽値	部分文字列の存在確認
`startsWith(substr, from)`	真偽値	先頭一致
`endsWith(substr, len)`	真偽値	末尾一致
`indexOf(substr, from)`	位置 / `-1`	最初の一致位置
`lastIndexOf(substr, from)`	位置 / `-1`	最後の一致位置
`slice(begin, end)`	文字列	部分取得 (負数 OK)
`substring(begin, end)`	文字列	0 未満を 0 とみなす

2.1. 例 ― 商品コードを頭 3 文字で判定

const code = 'ABC-2025';
if (code.startsWith('ABC')) console.log('自社製品');

3. 変換・整形系メソッド

メソッド	役割	備考
`toUpperCase()` / `toLowerCase()`	大文字 ↔ 小文字	ロケール非依存
`padStart(len, fill)` / `padEnd(len, fill)`	桁埋め	`fill` 省略で空白
`repeat(n)`	文字列を n 回連結	`n` は 0 以上整数
`trim()` / `trimStart()` / `trimEnd()`	余白除去	ES2019 以降は `trimStart/End`

3.1. HTML サンプル ― 0 埋め＋大文字変換フォーム

ファイル名： serial_formatter.html

<!DOCTYPE html><html lang="ja"><meta charset="utf-8">
<body>
<label>シリアル入力: <input id="src"></label>
<p id="dst"></p>

<script>
const input = document.getElementById('src');
const out   = document.getElementById('dst');

input.addEventListener('input', () => {
  const raw = input.value.replace(/[^0-9a-z]/gi, ''); // 英数のみ
  const serial = raw.toUpperCase().padStart(12, '0'); // 12 桁 0 埋め
  out.textContent = `整形結果: ${serial}`;
});
</script>
</body>
</html>

入力欄に abc123 と打つと 整形結果: 000000ABC123 と即時反映。

replace() は正規表現だが紹介済みなので説明のみ
toUpperCase() で大文字化 → padStart() で 12 桁固定

４．分割・結合・反復

メソッド	戻り値 / 動作	典型例
`split(sep, limit)`	配列	CSV → 配列
`join()` (Array)	文字列	配列 → CSV
`repeat(n)`	文字列	区切り線生成 `"─".repeat(30)`

例 ― 改行区切りテキストを `<li>` 化

const text = 'りんご\nみかん\nバナナ';
const html = '<ul>\n' +
  text.split('\n').map(x => `  <li>${x}</li>`).join('\n') +
  '\n</ul>';
console.log(html);

デバックコンソールの出力

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

５．イテレータと国際化 (概要)

for…of で文字列を走査すると コードポイント単位
Intl.Segmenter (Stage 3) を使うと単語・文単位に分割可能

まとめ

1 文字操作 は [...str] と codePointAt() で Unicode 対応
検索系 は includes / startsWith / indexOf を組み合わせ条件分岐
整形系 は padStart と repeat が日付・連番のゼロ埋めに便利
split + join で配列⇔文字列を自在に変換

　これらを組み合わせれば、フォーム入力のバリデーションや表示用フォーマットが最小限のコードで実装できます。まずはサンプルを動かし、コンソール出力を確認しながら各メソッドの戻り値と挙動を体感してみましょう。

【JavaScript入門】stringのメソッド