実行環境 Node.js 15.2.1

公開日 January 6, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

こちらはStringオブジェクト(文字列)のsliceメソッドのページです。
Arrayオブジェクト(配列)のsliceメソッドはArrayオブジェクト(配列)のsliceメソッドの使用方法 を参照してください。

slice(String、文字列)

このページでは豊富な例を用いてJavaScript(js)のStringオブジェクトのsliceの使い方を学ぶことができます。

JavaScript(js)のsliceはStringオブジェクト(文字列)のメソッドの1つです。
呼び出し元の文字列を切り出した、新しい文字列を戻り値として返します。
任意指定である第1引数と第2引数を与えることで、文字列の切り出し範囲を指定することができます。

呼び出し元の配列には変更を行わないイミュータブルなメソッドです。

TL;DR

基本

// 引数を与えない場合は文字列全体を切り出します
const string1 = 'JavaScript';
const sliced_string1 = string1.slice();
console.log(sliced_string1);
==> JavaScript



let string2 = 'I have a pen.';
let sliced_string2 = string2.slice();
console.log(sliced_string2);
==> I have a pen.

// 代入しても元の文字列には影響なし
sliced_string2 = 'APPLE';
console.log(sliced_string2);
==> APPLE
console.log(string2);
==> I have a pen.

切り出し範囲の指定

// 第1引数に文字列のインデックスの数値を指定することで切り出し範囲を指定することができる
const string1 = 'JavaScript';
// 文字列は添字(ブラケット記法)でアクセスできる
console.log(string1[2]);
==> v
const sliced_string1 = string1.slice(2);
console.log(sliced_string1);
==> vaScript
// 元の文字列には影響なし
console.log(string1);
==> JavaScript



// 第2引数で範囲の終わりを指定できる(第2引数で指定したインデックスの要素は含まない)
const string2 = 'JavaScript';
console.log(string2[5]);
==> c
const sliced_string2 = string2.slice(2, 5);
console.log(sliced_string2);
==> vaS



// マイナスの値を指定したときは最後尾の要素から選択される
const string3 = 'I have a pen, I have an apple.';
const sliced_string3 = string3.slice(2, -1);
console.log(sliced_string3);
==> have a pen, I have an apple



const sliced_string4 = string3.slice(-6);
console.log(sliced_string4);
==> apple.

解説

基本

sliceメソッドは呼び出し元の文字列を切り出し、新たな文字列を生成して戻り値として返します。
引数を与えずに使用すると、文字列全体を切り出したものを返します。

let string1 = 'JS';
let sliced_string1 = string1.slice();
console.log(sliced_string1);
==> JS

// 代入しても元の文字列には影響なし
sliced_string1 = 'javascript';
console.log(sliced_string1);
==> javascript
console.log(string1);
==> JS

切り出し範囲の指定

sliceの第1引数と第2引数は任意指定の引数です。 しかし、これらの引数を与えることで文字列の切り出し範囲を指定することができます。 指定する値は数値で、この数値は文字列のインデックスとみなされます。

第1引数のみ指定する場合、指定したインデックスの文字から末尾までが切り出されます。
第2引数も指定する場合、 第1引数で指定したインデックスの文字から第2引数で指定したインデックスの文字の1つ手前の文字までが切り出し範囲となります。 第2引数で指定したインデックスの文字は切り出される文字列に含まれないので注意してください。

また、マイナスのインデックス値を指定する場合は文字列.length + 引数のインデックスを指定することと同じです。

// 第1引数のみの指定
const string1 = 'TypeScript';
// 文字列の添字(ブラケット記法)へのアクセス
console.log(string1[4]);
==> S
const sliced_string1 = string1.slice(4);
console.log(sliced_string1);
==> Script



// 第1、第2引数の指定
const string2 = 'TypeScript';
const sliced_string2 = string2.slice(4, 6);
console.log(sliced_string2);
==> Sc



// マイナスの値の指定
const string3 = 'TypeScript';
const sliced_string3 = string3.slice(4, -1);
console.log(sliced_string3);
==> Scrip

1次情報

String.prototype.slice() - MDN web docs

String(文字列) - MDN web docs