【JavaScript】文字列から開始位置と文字数を指定して取得する方法｜slice・substring・substrの違いと負のインデックス・実用例まで解説

const str = "abcdefg";
const start = 2;  // 開始位置（0始まり）
const length = 3; // 取り出す文字数

const result = str.slice(start, start + length);
console.log(result); // "cde"

const str = "abcdefg";
console.log(str.slice(2)); // "cdefg"（2文字目から最後まで）

const str = "abcdefg";
console.log(str.slice(-3));    // "efg"（末尾から3文字）
console.log(str.slice(-3, -1)); // "ef"（末尾から3文字目〜末尾の手前まで）
console.log(str.slice(1, -1));  // "bcdef"（先頭と末尾を1文字ずつ除く）

const str = "abcdefg";
const start = 2;
const length = 3;

const result = str.substring(start, start + length);
console.log(result); // "cde"

const str = "abcdefg";

console.log(str.substring(-3));   // "abcdefg"（負の値は 0 扱い → 全体）
console.log(str.substring(5, 2)); // "cde"（5と2が入れ替わる → substring(2, 5)）
console.log(str.slice(5, 2));     // ""（slice は入れ替えないので空文字）

const str = "abcdefg";

// substr(開始, 文字数) → 文字数をそのまま渡せる
console.log(str.substr(2, 3)); // "cde"

// 置き換え：slice(開始, 開始 + 文字数)
console.log(str.slice(2, 2 + 3)); // "cde"（同じ結果）

const line = "name: 田中太郎";

const start = line.indexOf(":") + 1; // ":" の次の位置
const value = line.slice(start).trim();
console.log(value); // "田中太郎"

const str = "\u{1F600}abc"; // 絵文字 + "abc"

console.log(str.length);      // 5（絵文字が 2 コード単位とカウントされる）
console.log(str.slice(0, 1)); // 壊れた半端な文字（文字化けする）

function subByCodePoint(str, start, length) {
  return [...str].slice(start, start + length).join("");
}

const str = "\u{1F600}abc"; // 絵文字 + "abc"
console.log([...str].length);           // 4（絵文字が 1 文字としてカウント）
console.log(subByCodePoint(str, 0, 1)); // 絵文字1文字（壊れない）
console.log(subByCodePoint(str, 1, 2)); // "ab"

const ymd = "20260614";

const year  = ymd.slice(0, 4); // "2026"
const month = ymd.slice(4, 6); // "06"
const day   = ymd.slice(6, 8); // "14"

console.log(`${year}年${month}月${day}日`); // "2026年06月14日"

const card = "1234567812345678";

const masked = "*".repeat(card.length - 4) + card.slice(-4);
console.log(masked); // "************5678"