このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】文字列の抜き出し

文字列の抜き出し

　文字列の一部だけを取り出して別の文字列を作る処理は、ログの切り出しや入力データの整形など日常的に行います。JavaScript にはそのためのメソッドが複数あり、開始位置・終了位置の扱い や 負数指定の可否 が少しずつ異なります。ここでは代表的な 3 メソッド substr substring slice を比較し、具体例を交えて整理します。

１．3 大メソッド早見表

メソッド引数の意味負数指定終端の扱いメモ
substr(start, length)start から length 文字start 可文字数 指定最も直感的
substring(start, end)start から end の直前不可 (負は 0)位置 指定start と end が逆でも OK
slice(start, end)start から end の直前どちらも可位置 指定負数は末尾から数える

1.1. 共通点

  • 元の文字列を破壊せず、新しい文字列を返す
  • 第 2 引数を省略すると末尾まで取得

1.2. 相違点

  • 長さ指定 は substr だけ
  • 負数 は slice と substr の start に使える
  • substring は負数を 0 と見なし、start > end なら自動で入れ替える

２．substr を使った抜き出し

const city = '東京大阪京都名古屋札幌福岡';
console.log(city.substr(2, 4));   // "大阪京都"
console.log(city.substr(-4, 2));  // "札幌"

start が負数なら末尾からカウントし、length は必ず 0 以上で切り詰められます。

３．substring の特徴

const city = '東京大阪京都名古屋札幌福岡';

console.log(city.substring(2, 6));  // "大阪京都"
console.log(city.substring(6, 2));  // "大阪京都"  ← 自動で順序を入れ替え
console.log(city.substring(-3, 2)); // "東京"    ← -3 は 0 と解釈

逆順指定でも動くため、フォーム入力で番号が前後しても安全に処理できます。

４．slice の柔軟性

const city = '東京大阪京都名古屋札幌福岡';

console.log(city.slice(2, 6));   // "大阪京"
console.log(city.slice(-4, -1)); // "札幌福"
console.log(city.slice(6, 2));   // ""      ← 逆順は空文字

開始・終了とも負数 OK。配列の slice() と同じ感覚で使えます。

５．実践サンプル ― 抜き出しツール

ファイル名： extractor_tool.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字列抜き出しツール</title>
<style>
label { display:block; margin:0.5rem 0; }
input[type="number"] { width:5rem; }
pre { background:#f4f4f4; padding:6px; }
</style>
</head>
<body>
<h2>📌 文字列抜き出しデモ</h2>

<label>対象文字列:
  <input id="target" value="東京|大阪|京都|名古屋|札幌|福岡">
</label>

<label>開始位置 (start):
  <input id="start" type="number" value="0">
</label>

<label>長さ / 終了位置 (len or end):
  <input id="end" type="number">
</label>

<label>
  <select id="mode">
    <option value="substr">substr</option>
    <option value="substring">substring</option>
    <option value="slice">slice</option>
  </select>
  を使う
</label>

<button id="run">抜き出し実行</button>

<h3>結果</h3>
<pre id="out">ここに結果が表示されます</pre>

<script>
document.getElementById('run').addEventListener('click', () => {
  const str   = document.getElementById('target').value;
  const start = Number(document.getElementById('start').value);
  const end   = document.getElementById('end').value === ''
                ? undefined
                : Number(document.getElementById('end').value);
  const mode  = document.getElementById('mode').value;

  let result = '';
  switch (mode) {
    case 'substr':
      result = str.substr(start, end);
      break;
    case 'substring':
      result = str.substring(start, end);
      break;
    case 'slice':
      result = str.slice(start, end);
      break;
  }
  document.getElementById('out').textContent =
    `抜き出した文字列: 「${result}」`;
});
</script>
</body>
</html>

ブラウザ操作例

  1. 対象文字列は初期値のまま
  2. 開始位置に 6、長さ / 終了位置に 10 を入力
  3. モードを slice にして「抜き出し実行」
  4. 結果欄に 抜き出した文字列: 「京都|名」 と表示

プログラム解説

  • 入力フォームで 開始位置 と 長さ / 終端位置 を受け取り、switch で各メソッドを呼び分け。
  • substr では第 2 引数が「長さ」、substring と slice では「終了位置」の直前であることに注意
  • 数値入力欄を空にすると undefined を渡し、末尾まで取得できるようにしている。

まとめ

  • 長さで抜くなら substr、位置で抜くなら slice が覚えやすい。
  • 逆順指定や負数扱いなど細かな差異に注意し、ユースケースに最適なメソッドを選択する。
  • まずはサンプルを動かし、開始・終了値を変えて挙動を確認すると理解が深まる。