概要: このチュートリアルでは、JavaScript String のslice()
メソッドを使用して、文字列から部分文字列を抽出する方法を学びます。
JavaScript String slice() メソッドの紹介
String.prototype.slice()
メソッドは、文字列の一部を抽出し、部分文字列として返します。 以下にslice()
メソッドの構文を示します。
slice(start, end)
slice()
メソッドには、2つのオプションパラメータstart
とend
があります。
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)
end
がstart
で表される位置より前の位置を表す場合、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)
出力
john
Code language: JavaScript (javascript)
仕組み
- まず、
indexOf()
メソッドを使用して@
記号の位置を探します。indexOf()
の戻り値は、slice()
メソッドの第二引数として使用されます。 - 次に、
slice()
メソッドを使用して、文字列の先頭から@
記号の手前の文字までを抽出し、メールアドレスのローカル部分を抽出します。
概要
- JavaScript String の
slice()
メソッドを使用して、文字列から部分文字列を抽出します。