デモページはこちら

JavaScriptで文字列または配列を切り出すメソッドのまとめです。sliceは文字列と配列、substrは文字列の切り出しができます。

以下のhtmlの構造でテストします。

<p class="title">slice・substr</p>
<p class="txt">HTML・CSS・JavaScript</p>
<input type="button" class="btn01" value="slice（終了位置指定なし）">
<input type="button" class="btn02" value="substr（終了位置指定なし）"><br><br>
<input type="button" class="btn03" value="slice（終了位置指定あり）">
<input type="button" class="btn04" value="substr（終了位置指定あり）"><br><br>
<p class="title">slice</p>
<ul>
	<li>HTML・CSS</li>
	<li>JavaScript・jQuery</li>
	<li>Photoshop・Illustrator・XD</li>
	<li>ツール・フリーソフト・その他</li>
</ul>
<input type="button" class="btn05" value="slice（終了位置指定なし）">
<input type="button" class="btn06" value="slice（終了位置指定あり）"><br><br>
<input type="button" class="btn07" value="substr（エラー発生）"><br><br>
<input type="button" class="btn08" value="リロードしてリセット">

まず文字列の切り出しです。slice・substrの両メソッドは第1引数に切り出したい文字列の開始位置を指定します。文字列の先頭は0です。第2引数を省略した場合は文字列の末尾まで切り出すため、result01とresult02は同じ結果になります。
次に第2引数を指定する場合ですが、sliceメソッドの第2引数は切り出す文字列の終了位置、substrメソッドは切り出す文字数になります。sliceメソッドの終了位置は文字列の先頭から数えた位置ですが、終了位置に指定した文字は切り出しません。終了位置に指定した文字の手前の文字までが切り出しの対象です。substrメソッドの切り出す文字数は1から数えます。result03とresult04の結果は同じですが、第2引数はそれぞれ異なる指定になります。
最後に配列の切り出しです。sliceメソッドで開始位置と終了位置をliタグのインデックス番号で指定して、指定した範囲のCSSを変更します。終了位置を指定する場合、文字列の切り出しと同様終了位置に指定した要素は含まれません。substrメソッドは文字列を切り出すメソッドのため配列で使用するとエラーが発生します。

$(function() {
	var txt = $('.txt').text();
	$('.btn01').on('click', function() {
		var result01 = txt.slice(5);
		console.log(result01);
	});
	$('.btn02').on('click', function() {
		var result02 = txt.substr(5);
		console.log(result02);
	});
	$('.btn03').on('click', function() {
		var result03 = txt.slice(5, 8);
		console.log(result03);
	});
	$('.btn04').on('click', function() {
		var result04 = txt.substr(5, 3);
		console.log(result04);
	});
	$('.btn05').on('click', function() {
		$('ul').children().slice(1).css('font-weight', 'bold');
	});
	$('.btn06').on('click', function() {
		$('ul').children().slice(0, 2).css('color', 'orange');
	});
	$('.btn07').on('click', function() {
		$('ul').children().substr(0, 1).css('color', 'red'); //エラー発生
	});
	$('.btn08').on('click', function() {
		location.reload();
	});
});

//result01
CSS・JavaScript
//result02
CSS・JavaScript
//result03
CSS
//result04
CSS