JavaScript String slice()

概要: このチュートリアルでは、JavaScript String のslice()メソッドを使用して、文字列から部分文字列を抽出する方法を学びます。

JavaScript String slice() メソッドの紹介

String.prototype.slice()メソッドは、文字列の一部を抽出し、部分文字列として返します。 以下にslice()メソッドの構文を示します。

slice(start, end)

slice()メソッドには、2つのオプションパラメータstartendがあります。

start

startパラメータは、メソッドが抽出を開始する0ベースのインデックスです。 例えば

const str = 'Hello';
const substr = str.slice(3);

console.log({ substr });
Code language: JavaScript (javascript)

出力

{ substr: 'lo' }Code language: CSS (css)

startが負の場合、slice()メソッドはstr.length + startから抽出を開始します。 例えば

const str = 'Hello';
const substr = str.slice(-3);

console.log({ substr });Code language: JavaScript (javascript)

出力

{ substr: 'llo' }Code language: CSS (css)

startが省略されている場合、undefinedの場合、または数値に変換できない場合、slice()メソッドは文字列の先頭から抽出を開始します。

const str = 'Hello';
const substr = str.slice();

console.log({ substr });
Code language: JavaScript (javascript)

出力

{ substr: 'Hello' }Code language: CSS (css)

start文字列の長さ以上の場合、slice()メソッドは空文字列を返します。 例えば

const str = 'Hello';
const substr = str.slice(5);

console.log({ substr });
Code language: JavaScript (javascript)

出力

{ substr: '' }Code language: CSS (css)

end

endは、slice()メソッドが抽出を終了する前の位置を指定する0ベースのインデックスです。 結果の文字列には、endインデックスの文字は含まれません。 例えば

const str = 'Hello';
const substr = str.slice(0, 2);

console.log({ substr });Code language: JavaScript (javascript)

出力

{ substr: 'He' }Code language: CSS (css)

endが負の場合、slice()メソッドはそれをstr.length + endとして扱います。 例えば

const str = 'Hello';
const substr = str.slice(0, -2);

// str.length 5
// str.length + end = 5 + (-2) = 3

console.log({ substr });Code language: JavaScript (javascript)

end文字列の長さより大きい場合、slice()メソッドは文字列の最後まで抽出します。 例えば

const str = 'Hello';
const substr = str.slice(2, 6);

console.log({ substr });Code language: JavaScript (javascript)

出力

{ substr: 'llo' }Code language: CSS (css)

endが省略されている場合、undefinedの場合、または数値に変換できない場合、slice()メソッドも文字列の最後まで抽出します。 例えば

const str = 'Hello';
const substr = str.slice(3);

console.log({ substr });Code language: JavaScript (javascript)

出力

{ substr: 'lo' }Code language: CSS (css)

endstartで表される位置より前の位置を表す場合、slice()メソッドは空文字列を返します。 例えば

const str = 'Hello';
const substr = str.slice(3, 2);

console.log({ substr });Code language: JavaScript (javascript)

出力

{ substr: '' }Code language: CSS (css)

JavaScript String slice() メソッドの実践例

次の例では、slice()メソッドを使用してメールアドレスのローカル部分を取得します。

let email = '[email protected]'
let localPart = email.slice(0,email.indexOf('@'));

console.log(localPart);Code language: JavaScript (javascript)

出力

johnCode language: JavaScript (javascript)

仕組み

  • まず、indexOf()メソッドを使用して@記号の位置を探します。 indexOf()の戻り値は、slice()メソッドの第二引数として使用されます。
  • 次に、slice()メソッドを使用して、文字列の先頭から@記号の手前の文字までを抽出し、メールアドレスのローカル部分を抽出します。

概要

  • JavaScript String のslice()メソッドを使用して、文字列から部分文字列を抽出します。
このチュートリアルは役に立ちましたか?