sliceメソッド

広告

sliceメソッドは文字列の中の指定された範囲の部分文字列を返します。 

slice(start[, end])

文字列の中から開始位置から終了位置までの部分文字列を取り出し新しい文字
列として返します。

パラメータ:
  start  開始インデックス
  end  終了インデックス
戻り値:
  指定された範囲の部分文字列

対象の文字列の開始インデックスの位置にある文字から終了インデックスの位置にある文字の前の文字までの部分文字列を新しい文字列として返します。

"Thank you"という文字列を例に考えてみます。文字列は9個の文字が含まれており各文字に対するインデックスは次の通りです。 

T   0
h   1
a   2
n   3
k   4
    5
y   6
o   7
u   8

この時、sliceメソッドを使用すると次のような部分文字列を取得できます。 

slice(0, 1) --> "T"
slice(0, 2) --> "Th"
slice(0, 3) --> "Tha"
slice(0, 4) --> "Than"
slice(0, 5) --> "Thank"
slice(3, 7) --> "nk y"

sliceメソッドの2番目の引数を省略した場合、開始インデックスの文字から最後の文字までの部分文字列を返します。

先ほどの文字列を対象とした場合、sliceメソッドによって次のような部分文字列を取得できます。 

slice(0) --> "Thank you"
slice(6) --> "you"

インデックスには負の整数を指定することもできます。負の値の場合は文字列の最後の文字から位置を数えます。 

T   0  -9
h   1  -8
a   2  -7
n   3  -6
k   4  -5
    5  -4
y   6  -3
o   7  -2
u   8  -1

例えばこの文字列の場合、インデックス7とインデックス-2は同じ文字を指します。

負の値を使ってsliceメソッドを使用すると次のような部分文字列を取得できます。 

slice(-9, -4) --> "Thank"
slice(-8, 4)  --> "han"
slice(3, -1)  --> "nk yo"

なおsliceメソッドでは1番目の引数によって決まる文字列のインデックスが、2番目の引数によって決まる文字列のインデックスよりも大きい場合には何も返しません。

注意して頂きたいのは対象となる文字列またはStringクラスのオブジェクトそのものを変化させるのではなく、新しく部分文字列を作成して返すという点です。sliceメソッドを呼び出しても対象のオブジェクトそのものは変化しません。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script6_1.js">
</script>

</body>
</html>

function print(str){
  document.write(str + "<br />");
}

document.write("<p>");

var str_obj = new String("Thank you");

print(str_obj);

print("slice(0, 1) --> " + str_obj.slice(0, 1));
print("slice(0, 2) --> " + str_obj.slice(0, 2));
print("slice(0, 5) --> " + str_obj.slice(0, 5));
print("slice(3, 7) --> " + str_obj.slice(3, 7));
print("slice(0) --> " + str_obj.slice(0));
print("slice(6) --> " + str_obj.slice(6));
print("slice(-9, -4) --> " + str_obj.slice(-9, -4));
print("slice(-8, 4) --> " + str_obj.slice(-8, 4));
print("slice(5, 0) --> " + str_obj.slice(5, 0));

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p6-1

( Written by Tatsuo Ikura )