JavaScriptのslice()メソッドは引数で指定した位置の文字列を切り取るメソッドです。本コラムでは、slice()メソッドの使い方をサンプルコードと共に解説します。
目次
1.1. slice()メソッドの基本書式
1.2. パラメーター
1.3. 戻り値
2.1. 文字列の一部分を切り取る方法
2.2. 文字列を指定の位置から最後まで切り取る方法
2.3. 引数にマイナスの数値を指定した場合
2.4. 終了位置が開始位置の数値より小さい場合
1. slice()メソッド
1.1. slice()メソッドの基本書式
●slice()メソッド
stringObj.slice(from, [to])
1.2. パラメーター
from:
切り取る文字列の開始位置を指定します。
[to]:
(省略可能)切り取る文字列の終了位置を指定します。toを省略した場合は、fromから文字列の最後までを切り取ります。
1.3. 戻り値
fromからtoの手前まで切り取った文字列を返します。
2. slice()メソッドの使い方
2.1. 文字列の一部分を切り取る方法
サンプルコードで文字列「０１２３４５６７８９」の一部分を切り取ってみましょう。
var stringObj = "０１２３４５６７８９"; //切り取り対象の文字列
stringObj.slice(1, 4); //Stringオブジェクトの一部分を切り取る
サンプルHTMLの「JS_Sample1.html」をコピーして保存する場合は、ファイル形式を「utf-8」にします。
slice(1, 4)は、開始位置のインデックス「１」から終了位置のインデックス「４」の間の文字列を切り取ります。
●JS_Sample1.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slice() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス1からインデックス4の間の文字列が切り取られます。</p>
<button onclick="strFunction01()">sliceの実行</button>
<p id="sample1"></p>
<script>
function strFunction01() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.slice(1, 4);
document.getElementById("sample1").innerHTML = result;
}
</script>
</body>
</html>
--------------------
「slice実行」ボタンをクリックして動きを確認して下さい。切り取られた文字列の「１２３」が段落に表示されます。
●サンプルコードの実行結果
ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス1からインデックス4の間の文字列が切り取られます。
2.2. 文字列を指定の位置から最後まで切り取る方法
Stringオブジェクトの文字列を指定位置から最後まで切り取るには、sliceメソッドの第二引数を省略します。
var stringObj = "０１２３４５６７８９"; //切り取り対象の文字列
stringObj.slice(5); //Stringオブジェクトの一部分を切り取る
●JS_Sample2.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slice() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス５から文字列の最後までの文字列が切り取られます。</p>
<button onclick="strFunction02()">sliceの実行</button>
<p id="sample2"></p>
<script>
function strFunction02() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.slice(5);
document.getElementById("sample2").innerHTML = result;
}
</script>
</body>
</html>
--------------------
sliceメソッドの開始位置のみを指定すると、指定の位置から文字列の最後まで文字を切り取ります。
●サンプルコードの実行結果
ボタンをクリックすると、Stringオブジェクト「０１２３４５６７８９」のインデックス５から文字列の最後までの文字列が切り取られます。
2.3. 引数にマイナスの数値を指定した場合
sliceメソッドにマイナスの値を指定すると後ろから数えた文字列が切り取られます。
var stringObj = "０１２３４５６７８９"; //切り取り対象の文字列
stringObj.slice(-2);
●JS_Sample3.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slice() method - Introduction to JavaScript</title>
<body>
<p>sliceの引数にマイナスを指定すると、後ろから数えた文字列が切り取られます</p>
<button onclick="strFunction03()">sliceの実行</button>
<p id="sample3"></p>
<script>
function strFunction03() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.slice(-2);
document.getElementById("sample3").innerHTML = result;
}
</script>
</body>
</html>
--------------------
●サンプルコードの実行結果
sliceの引数にマイナスを指定すると、後ろから数えた文字列が切り取られます
2.4. 終了位置が開始位置の数値より小さい場合
sliceメソッドの終了位置の値を、開始位置の値よりも小さく指定すると、空の文字列を返します。
var stringObj = "０１２３４５６７８９"; //切り取り対象の文字列
stringObj.slice(5, 1); //Stringオブジェクトの一部分を切り取る
●JS_Sample4.html --------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slice() method - Introduction to JavaScript</title>
<body>
<p>sliceの開始位置が終了位置よりも大きい場合、空の文字列を返します。</p>
<button onclick="strFunction04()">sliceの実行</button>
<p id="sample4"></p>
<script>
function strFunction04() {
var stringObj = "０１２３４５６７８９";
var result= stringObj.slice(5, 1);
if(result == ""){
var res = "空の文字です。";
}else{
var res = "空ではありません。";
}
result
document.getElementById("sample4").innerHTML = res;
}
</script>
</body>
</html>
--------------------
●サンプルコードの実行結果
sliceの開始位置が終了位置よりも大きい場合、空の文字列を返します。
