定義と使い方

文字列におけるslice()関数は指定された文字列の特定の範囲を切り取って（slice）抽出した結果を新しい文字列として返します。

この関数は、文字列を切り取って抽出する際に非常に便利です。

特徴

  • 指定したインデックス範囲で切り取った文字列を、新しい文字列として返します。
  • インデックス範囲は、引数で指定した開始位置から終了位置まで（終了位置は含まれません。直前まで抽出されます）です。
  • このような動作により、指定された元の文字列は変更されず、そのまま保持されます。

文字列のインデックスは0から始まります。

使用方法を視覚的に表すと、次のようになります。 
'あいう'.slice(0, 2); 👉 'あい'

基本例

JavaScript 
/**
 * 文字列の特定の範囲を抽出し、新しい文字列として返す関数
 * str.slice(beginIndex[, endIndex])
 * 
 * @param {number} beginIndex - 抽出を開始する部分文字列の開始インデックス。
 * @param {number} endIndex - 抽出を終了する部分文字列の終了インデックス（直前まで抽出）。
 * @returns {string} - 抽出された部分文字列。
*/

/*
 * 注意してください！
 * 文字列のインデックスは0から始まります。
 * 最初の文字のインデックスは0で、2番目の文字のインデックスは1です。
*/

const greeting = "ようこそ。コーディングエブリバディです。";

const hello = greeting.slice(0, 5);
console.log(hello); // 出力: "ようこそ。"

const niceTomeetYou = greeting.slice(6, 11);
console.log(niceTomeetYou); // 出力: "コーディング"

/* 👇 元の文字列は変更されません。 */
console.log(greeting); // 出力: "ようこそ。コーディングエブリバディです。"

配列では、配列slice()が配列の特定の範囲の要素を切り取って抽出し、その結果を新しい配列として返します。

構文

JavaScript 
str.slice(beginIndex)
str.slice(beginIndex, endIndex)

strは、slice()関数を適用する元の文字列です。

パラメーター

slice() パラメーターの引数の説明
beginIndex オプション。抽出を開始する0から始まるインデックスを指定します。
  • 省略した場合は、デフォルト値として0が使用されます。
  • 負の値を指定することもでき、その場合は文字列の末尾から逆方向にカウントされます。
  • 抽出する文字列の長さ（str.length）以上の値を指定すると、何も抽出されません。
endIndex オプション。抽出を終了するインデックスを指定します。slice()は、指定したこのendIndexインデックスを含めずに抽出します。
  • 省略した場合は、文字列の末尾まで抽出します。
  • 負の値を指定することもでき、その場合は文字列の末尾から逆方向にカウントされます。
  • 抽出する文字列の長さ（str.length）以上の値を指定した場合は、文字列の末尾まで抽出されます。

戻り値

slice()関数は、元の文字列の特定の範囲を抽出して新しい文字列として返します。返されるこの新しい文字列は、元の文字列の一部をコピーしたものであるため、元の文字列は変更されません。

パラメーターと戻り値の例

JavaScript 
let str1 = "ようこそ。", // str1の長さは5です。
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -1),
    str4 = str1.slice(),
    str5 = str1.slice(30);
    
console.log(str2); // 出力: "うこそ。"
console.log(str3); // 出力: "。"
console.log(str4); // 出力: "ようこそ。"
console.log(str5); // 出力: ""

注意点：絵文字（Emoji）を切り取る場合

JavaScriptで文字列を切り取るslice()やsubstring()のような文字列関数は、人が認識する文字数ではなく、文字列が内部的に保存されるUTF-16コードユニット（Code Unit）を基準としてインデックスを計算します。

一般的な英字やハングルは1つのコードユニットで表現されますが、1つのUTF-16コードユニットでは表現できない絵文字（例：😃、🎉、❤️）は、2つのコードユニットで構成されたサロゲートペア（Surrogate Pair）を使用します。

「UTF-16コードユニット（Code Unit）」という用語について、簡単に補足説明します。
UTF-16コードユニット（Code Unit）
JavaScriptでは、文字列の長さ（インデックス）を計算するときに**UTF-16コードユニット**を基準にします。
UTF-16におけるコードユニットとは、文字列を内部的に保存・処理するために使用される**16ビット（2バイト）**単位のデータを意味します。JavaScriptの文字列のlengthは、このコードユニットの数を表しています。英字、数字、そして一般的な日本語文字は1つの「UTF-16コードユニット」で表現されるため、文字列の長さやインデックスでもそれぞれ**1文字として計算**されます。
一方、「UTF-16コードユニット」1つだけでは表現できない絵文字は、**2つのコードユニットを1組にして1文字として扱います**。このように2つのコードユニットを組み合わせた構造を**サロゲートペア（Surrogate Pair）**と呼びます。
JavaScript 
// 🚨 コードユニット基準で切り取られる例
'😃🏀🍅'.slice(0, 2);
// 結果: '😃'
// 2文字を切り取ったように見えますが、
// 実際には2つのコードユニットだけが抽出され、最初の絵文字だけが返されます。

// ❌ 絵文字を途中で切ってしまう危険な例
'😃🏀🍅'.slice(0, 1);
// 結果: 文字化け
// サロゲートペアの半分だけが切り取られ、文字データが壊れてしまいます。

このように、slice()はUTF-16コードユニット単位で文字列を処理するため、絵文字が含まれた文字列を文字（Code Point）単位で切り取る目的には適していません。

絵文字を含む文字列を、人が認識する文字単位で安全に処理するには、別の方法でアプローチする必要があります。

先に見たように、slice()はUTF-16コードユニット単位で動作するため、絵文字を文字（Code Point）単位で処理しようとする場合には、そのままでは使用しにくいです。

この問題を解決するには、文字列をコードユニットではなく、**ユニコード文字単位（Code Point）**として認識するように変換する必要があります。

最も現代的で推奨される二つの方法は次のとおりです。

スプレッド構文またはArray.from()使用

スプレッド構文(...)やArray.from()は、文字列を配列に変換する際に、JavaScriptの文字列イテレーション規約に従ってサロゲートペアを一つのユニコード文字（Code Point）として処理します。

解決原理
  • 変換：'😃🏀' → ['😃', '🏀']
  • 操作：配列は要素単位で配列slice()が動作します
  • 結合：配列要素を連結して文字列に変換するjoin()で、再び文字列に結合します
JavaScript 
const emojiString = '😃🏀🍅🐵';

// スプレッド構文を使用して文字単位の配列に変換
const emojiArray = [...emojiString];
// ['😃', '🏀', '🍅', '🐵']

// 必要な文字数だけ安全に切り出す
const result = emojiArray.slice(0, 2).join('');

console.log(result);
// 出力: "😃🏀"

この方法を使用すると、絵文字を含む文字列を人が認識する文字単位で安全に処理できます。

絵文字（😊）については、Webページで絵文字（エモジ）を使用するを参考にしてください。

slice()とsubstring()関数違い

slice()とsubstring()関数はほぼ同じように動作しますが、引数の処理方法にいくつか微妙な違いがあります。

補足説明
substring()関数は文字列の一部分を抽出します。文字列を引数として渡された開始インデックスから終了インデックスの直前まで抽出し、文字列として返す関数です。

以下の表は、slice()およびsubstring()関数の違いを比較したものです。

slice()とsubstring()関数の違いの比較
違い slice() substring()
負のインデックスのサポート 負の値は末尾からの逆方向でカウントされます 負の値は0として処理されます
開始インデックスが終了インデックスよりも大きいとき 開始インデックスが終了インデックスよりも大きいとき、交換なし。空の文字列("")を返します。 開始インデックスが終了インデックスよりも大きいとき、2つの値を自動的に入れ替えて処理
JavaScript 
const str = "JavaScript";

// slice()
console.log(str.slice(4, 1));  // "" (空の文字列)

// substring()
console.log(str.substring(4, 1));  // "ava"

例

slice() 関数は、JavaScriptで文字列を扱う際にさまざまな状況で有用に活用されます。いくつかの代表的な活用例は次の通りです。

部分文字列抽出

slice()関数は、文字列内から特定の範囲の文字を抽出する際に使用されます。これを通じて、必要な部分文字列を簡単に得ることができます。

JavaScript 
const originalString = "Hello, World!";
const slicedString = originalString.slice(0, 5);

console.log(slicedString); // 出力: "Hello"

文字列の一部変更

抽出した部分文字列を修正したり、他の文字列と結合して新しい文字列を生成したりするときに有用です。

JavaScript 
const greeting = "Hello";
const modifiedGreeting = greeting.slice(0, 3) + "p!";

console.log(modifiedGreeting); // 出力: "Help!"

文字列の一部を削除

特定の範囲の文字を抽出するのではなく、削除したいときに slice() 関数を使用することができます。

JavaScript 
const originalString = "こんにちは、JavaScript！";
const stringWithoutSegment = originalString.slice(0, 5) + originalString.slice(-1);

console.log(stringWithoutSegment); // 出力: "こんにちは！"

仕様書

slice()関数の仕様書
仕様書
slice() ECMAScript® 2026 Language Specification
#sec-string.prototype.slice

互換性

slice()関数の互換性
メソッド
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
Node.js
Node.js
slice() 1 12 1 1 0.10

参考資料

関連項目