【JavaScript】slice の使い方｜配列・文字列の切り出し・負のインデックス・splice / substring との違いまで解説

const newArray = array.slice(start, end);
// start: 開始インデックス（この位置を含む）
// end:   終了インデックス（この位置は含まない）
// 戻り値: 切り出した新しい配列（元の配列は変更されない）

const fruits = ["りんご", "みかん", "ぶどう", "いちご", "メロン"];

console.log(fruits.slice(1, 4));  // ["みかん", "ぶどう", "いちご"]
console.log(fruits.slice(2));     // ["ぶどう", "いちご", "メロン"]（末尾まで）
console.log(fruits.slice(0, 2));  // ["りんご", "みかん"]

// 元の配列は変更されない
console.log(fruits); // ["りんご", "みかん", "ぶどう", "いちご", "メロン"]

const original = [1, 2, 3];
const copy = original.slice();

copy.push(4);
console.log(original); // [1, 2, 3]（元の配列は変更されない）
console.log(copy);     // [1, 2, 3, 4]

const str = "JavaScript";

console.log(str.slice(0, 4));  // "Java"
console.log(str.slice(4));     // "Script"
console.log(str.slice(4, 10)); // "Script"

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

const filename = "report-2026.pdf";
const ext = filename.slice(filename.lastIndexOf("."));
console.log(ext); // ".pdf"

// 拡張子を除いたファイル名
const name = filename.slice(0, filename.lastIndexOf("."));
console.log(name); // "report-2026"

const arr = [10, 20, 30, 40, 50];

console.log(arr.slice(-2));     // [40, 50]（末尾2要素）
console.log(arr.slice(-3, -1)); // [30, 40]（末尾3番目〜末尾2番目）
console.log(arr.slice(-1));     // [50]（最後の1要素）

const path = "/home/user/documents/file.txt";

// 末尾4文字を取得
console.log(path.slice(-4)); // ".txt"

// 末尾4文字を除いた部分
console.log(path.slice(0, -4)); // "/home/user/documents/file"

const arr = [1, 2, 3, 4, 5];
const result = arr.slice(1, 3);

console.log(result); // [2, 3]
console.log(arr);    // [1, 2, 3, 4, 5]（元のまま）

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(1, 2); // インデックス1から2要素を削除

console.log(removed); // [2, 3]（削除された要素）
console.log(arr);     // [1, 4, 5]（元の配列が変更された）

const str = "JavaScript";

// slice: 負の値 → 末尾からの位置
console.log(str.slice(-6));    // "Script"

// substring: 負の値 → 0として扱われる
console.log(str.substring(-6)); // "JavaScript"（= substring(0)）

const str = "Hello";

// slice: start > end → 空文字
console.log(str.slice(3, 1));     // ""

// substring: start > end → 自動入れ替え（= substring(1, 3)）
console.log(str.substring(3, 1)); // "el"

function getPage(items, page, perPage) {
  const start = (page - 1) * perPage;
  return items.slice(start, start + perPage);
}

const allItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(getPage(allItems, 1, 3)); // [1, 2, 3]（1ページ目）
console.log(getPage(allItems, 2, 3)); // [4, 5, 6]（2ページ目）
console.log(getPage(allItems, 4, 3)); // [10]（最終ページ）

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

console.log(truncate("JavaScriptのsliceメソッド徹底解説", 15));
// "JavaScriptのsli..."

const text = "Hello?World";

// String.slice: サロゲートペアの途中で切れる可能性
console.log(text.slice(0, 6)); // "Hello\ud83c"（文字化け）

// スプレッド構文で文字単位の配列に変換してから slice
const chars = [...text];
console.log(chars.slice(0, 6).join("")); // "Hello?"（正しい）

function chunk(array, size) {
  const result = [];
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size));
  }
  return result;
}

console.log(chunk([1, 2, 3, 4, 5, 6, 7], 3));
// [[1, 2, 3], [4, 5, 6], [7]]

const arr = [1, 2, 3, 4, 5];

// 先頭1要素を除去
console.log(arr.slice(1));     // [2, 3, 4, 5]

// 末尾1要素を除去
console.log(arr.slice(0, -1)); // [1, 2, 3, 4]

// 先頭と末尾の両方を除去
console.log(arr.slice(1, -1)); // [2, 3, 4]