【JavaScript】substring の使い方｜文字列の切り出し・slice との違い・indexOf との組み合わせ・実務パターンまで解説

const result = str.substring(indexStart, indexEnd);
// indexStart: 切り出し開始位置（この位置を含む）
// indexEnd:   切り出し終了位置（この位置は含まない・省略可）
// 戻り値:    切り出した新しい文字列（元の文字列は変更されない）

const str = "JavaScript";

console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"
console.log(str.substring(4));     // "Script"（末尾まで）

// 元の文字列は変更されない
console.log(str); // "JavaScript"

const str = "JavaScript";

// substring(4, 0) → 自動的に substring(0, 4) になる
console.log(str.substring(4, 0)); // "Java"
console.log(str.substring(0, 4)); // "Java"（同じ結果）

const str = "JavaScript";

// substring(-3) → substring(0) と同じ
console.log(str.substring(-3));    // "JavaScript"（全体）

// substring(-3, 4) → substring(0, 4) と同じ
console.log(str.substring(-3, 4)); // "Java"

const str = "Hello";

// NaN → 0 として扱われる
console.log(str.substring(NaN, 3)); // "Hel"（= substring(0, 3)）

// 範囲外 → 文字列の長さに丸められる
console.log(str.substring(2, 100)); // "llo"（= substring(2, 5)）

// 同じインデックス → 空文字
console.log(str.substring(3, 3));   // ""

const str = "JavaScript";

// 正のインデックスで start < end なら同じ結果
console.log(str.substring(0, 4)); // "Java"
console.log(str.slice(0, 4));     // "Java"

const str = "JavaScript";

// 負のインデックス
console.log(str.substring(-6)); // "JavaScript"（-6 → 0）
console.log(str.slice(-6));     // "Script"（末尾から6文字）

// start > end
console.log(str.substring(4, 0)); // "Java"（自動入れ替え）
console.log(str.slice(4, 0));     // ""（空文字）

const str = "JavaScript";

// インデックス4から3文字を取得したい場合
console.log(str.substring(4, 7)); // "Scr"（4〜6）
console.log(str.slice(4, 7));     // "Scr"（4〜6）
console.log(str.substr(4, 3));    // "Scr"（4から3文字）← 非推奨

const email = "user@example.com";

// @ より前（ユーザー名）
const user = email.substring(0, email.indexOf("@"));
console.log(user); // "user"

// @ より後（ドメイン）
const domain = email.substring(email.indexOf("@") + 1);
console.log(domain); // "example.com"

const path = "/images/photo-2026.jpg";

// 拡張子を取得（最後の . 以降）
const ext = path.substring(path.lastIndexOf("."));
console.log(ext); // ".jpg"

// ファイル名を取得（最後の / 以降、拡張子なし）
const start = path.lastIndexOf("/") + 1;
const end = path.lastIndexOf(".");
const filename = path.substring(start, end);
console.log(filename); // "photo-2026"

const url = "https://www.example.com/path/to/page";

// プロトコル以降からパス手前まで
const afterProtocol = url.substring(url.indexOf("//") + 2);
const slashPos = afterProtocol.indexOf("/");
const domain = slashPos === -1
  ? afterProtocol
  : afterProtocol.substring(0, slashPos);

console.log(domain); // "www.example.com"

function truncate(str, max) {
  if (str.length <= max) return str;
  return str.substring(0, max) + "...";
}

console.log(truncate("JavaScriptのsubstringメソッド解説", 12));
// "JavaScriptのs..."

function maskEmail(email) {
  const atPos = email.indexOf("@");
  if (atPos <= 1) return email; // 短すぎる場合はそのまま

  const visible = email.substring(0, 1); // 先頭1文字
  const domain = email.substring(atPos);  // @以降
  const masked = "*".repeat(atPos - 1);   // 残りをマスク

  return visible + masked + domain;
}

console.log(maskEmail("tanaka@example.com"));
// "t*****@example.com"

function formatPhone(num) {
  // ハイフンなしの11桁 → 3-4-4 にフォーマット
  const digits = num.replace(/\D/g, "");
  if (digits.length !== 11) return num;

  return digits.substring(0, 3) + "-"
       + digits.substring(3, 7) + "-"
       + digits.substring(7);
}

console.log(formatPhone("09012345678"));
// "090-1234-5678"

function extractBetween(str, startDelim, endDelim) {
  const startPos = str.indexOf(startDelim);
  if (startPos === -1) return "";

  const contentStart = startPos + startDelim.length;
  const endPos = str.indexOf(endDelim, contentStart);
  if (endPos === -1) return "";

  return str.substring(contentStart, endPos);
}

console.log(extractBetween("Hello [World] !", "[", "]"));
// "World"