【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ

今回は、文字列や配列(Array)で使われる組み込みメソッド「slice」について学習しましょう！

このような内容も含めて、本記事では以下のような構成で解説していきます！

この記事で、slice()をしっかり学習してスキルアップを目指していきましょう！

＞＞＞ 今すぐ「slice()の使い方」を知りたい方はこちら

「slice()」とは？

それでは、まず最初に「slice()」メソッドの基本的な知識から学んでいきましょう！

slice()は、文字列や配列などからデータの一部分だけ取り出せるメソッドになります。

実を言うと、slice()は「文字列型（String）」「配列型（Array）」の両方にそれぞれ用意されています。

どちらも「slice」という名称のメソッドなので、最初は混乱してしまうかもしれません。

そこで、本記事では文字列型・配列型それぞれの使い方や違いについて解説するのでぜひ参考にしてみてください！

文字列型の「slice()」使い方

この章では、文字列型におけるslice()の基本的な使い方を学習していきましょう！

slice()の構文や簡単な切り抜き方、範囲を指定する方法などを学んでいきます。

文字列型によるslice()の基本的な構文と書き方

まずは、文字列（Stringオブジェクト）における「slice」メソッドから勉強していきましょう！

基本的な考え方として、特定の文字列を対象に任意の文字を切り抜くことができます。

一般的な構文は次の通りです。

var str = 文字列

str.slice( 開始位置, 終了位置(省略可能) );

文字列は先頭から0, 1, 2, 3・・・n文字目というように、1文字ずつ順番に数えます。

この時に何番目の文字を「開始位置」にするかを引数に指定するわけです。

開始位置だけを指定した場合、その位置から末尾の文字までを抜き取った文字列を返してくれます。

slice()で文字列を切り抜く方法

次に、slice()を使った簡単なサンプルを作ってみましょう！

例えば、次のサンプルを見てください！

var str = 'あおあかきいろ';

//開始位置を4文字目に指定
var result = str.slice( 4 );

console.log( result );

実行結果

きいろ

このサンプルでは、sliceの開始位置を4文字目に指定しています。

そのため、0文字目の「あ」から数え始めて4文字目の「き」から末尾までを抜き取っています。

実行結果を見ると「きいろ」という文字列を返しているのが分かりますね。

文字列の任意の範囲を切り抜く方法

今度は「終了位置」も指定することで、文字列を任意の範囲で切り抜いてみましょう！

次のサンプル例をみてください！

var str = 'あおあかきいろ';

var result = str.slice( 2, 4 );

console.log( result );

実行結果

あか

この場合、2文字目の「あ」から4文字目の「き」までの範囲を切り抜きます。

ただし、注意が必要なのは「4文字目」は含まれないという点です！

「slice( 2, 4 )」と記述したら、切り抜く文字は2文字目と３文字目だけなので覚えておきましょう！

配列型の「slice()」使い方

この章では、配列型におけるslice()の基本的な使い方を学習していきましょう！

slice()の構文や簡単な切り抜き方を指定する方法などを学んでいきます。

配列型によるslice()の基本的な構文と書き方

まずは、配列型（Arrayオブジェクト）における「slice」メソッドの構文を見ていきましょう！

基本的な考え方は、文字列型で利用したsliceメソッドとほとんど同じです。

一般的な構文は次のようになります！

var array = 配列データ

array.slice( 開始位置, 終了位置(省略可能) );

構文を見ると分かるように、データ型が「文字列型」から「配列型」に変わるだけです。

そのため、引数の指定方法などはまったく同じです。

ただし、配列型の場合は要素のインデックス番号の位置で「開始位置・終了位置」を決めるという点を忘れないでください。

slice()で配列要素を切り抜く方法

それでは、実際に配列を使って要素を切り抜いて見いましょう！

次のサンプルを見てください！

var array = ['メロン', 'リンゴ', 'イチゴ', 'バナナ'];

//開始位置を指定
var result1 = array.slice( 1 );

//開始位置と終了位置を指定
var result2 = array.slice( 1, 3 );

console.log( result1 );
console.log( result2 );

実行結果

["リンゴ", "イチゴ", "バナナ"]
["リンゴ", "イチゴ"]

配列のインデックス番号を0番目から数えるようにし、上記サンプルのように切り抜く位置を指定すればOKです！

文字列のsliceと違って1文字ずつ数えるのではなく、あくまで「インデックス番号」の位置で指定するという点を忘れないようにしましょう！

「slice()」の類似メソッドについて

これまで「slice」の基本的な使い方を学習してきましたが、実を言うとJavaScriptにはよく似た類似のメソッドがいくつかあります。

なかでも、特に勘違いしやすいメソッドとして「substring」「splice」の2つをピックアップしてご紹介致しますので、ぜひ参考にしておいてください！

slice()とsubstring()の違い

まずは、「文字列（Stringオブジェクト）」の組み込みメソッドである「substring」の紹介です！

「substring」メソッドは「slice」と同じように、文字列の中から任意の箇所を抜き取ることが可能で、引数の指定方法や出力結果もほとんど同じです。

次のサンプルを見てください！

var str = 'あおあかきいろ';

var result1 = str.slice( 0, 2 );
var result2 = str.substring( 0, 2 );

console.log( result1 );
console.log( result2 );

出力結果

あお
あお

このサンプルを見ると、「slice」も「substring」もまったく同じ書き方であり、出力結果も同じ内容になっているのが分かります。

この結果から、どちらのメソッドも非常によく似た機能を持つメソッドであることが分かりますが、もちろん相違点もあります。

それは、「引数のマイナス値」と「開始位置 > 終了位置の関係」の2点になります！

次のサンプルを見てください！

var str = 'あおあかきいろ';

//引数にマイナス値がある場合
var result1 = str.slice( 0, -2 );
var result2 = str.substring( 0, -2 );

console.log( 'result1：' + result1 );
console.log( 'result2：' + result2 );

//開始位置が終了位置よりも大きい場合
var result3 = str.slice( 2, 0 );
var result4 = str.substring( 2, 0 );

console.log( 'result3：' + result3 );
console.log( 'result4：' + result4 );

出力結果

//引数にマイナス値がある
result1：あおあかき
result2：

//開始位置が終了位置よりも大きい
result3：
result4：あお

まず、引数にマイナス値がある場合ですが、「slice」は文字列の後方である末尾から数え始めるのに対して、「substring」は無条件に0へと変換されてしまいます。

そのため、( 0, -2 ) は ( 0, 0 ) に変換されるので出力結果は「空文字」になるというわけです。

また、開始位置が終了位置よりも大きい値を指定した場合、「slice」は空文字を返すのに対して「substring」は引数を反転した結果を返すようになります。

そのため、( 2, 0 ) は ( 0, 2 ) へと変換されるので、出力結果は「あお」と表示されるわけです。

「substring」メソッドについて更に学習を進めたい方は以下の記事で詳しく解説をしていますので、ぜひ参考にしてください。

slice()とsubstr()の違い

ここでは、sliceとsubstrの違いを解説します。

substrは文字列を切り出すときに使います。

第一引数に開始位置を指定します。第二引数には切り出す文字数を指定します。

次のプログラムで確認してみましょう。

var str = 'あおあかきいろ';
 
var result1 = str.slice( 2, 5 );
var result2 = str.substr( 2, 5 );
 
console.log( result1 );
console.log( result2 );

実行結果：

あかき
あかきいろ

このようにして、substrで文字列の範囲を指定して切り出すことができました。

slice()とsplice()の違い

次に、「配列（Arrayオブジェクト）」の組み込みメソッドである「splice」の紹介です！

「splice」メソッドを使う用途としては、配列の任意の要素を削除したり置換するような目的が多いため、「slice」のように任意の要素を抜き取るような目的ではあまり使われません。

しかしながら、名称がよく似ていることや引数の指定方法が同じであるため、勘違いしやすいメソッドと言えるでしょう。

次のサンプルを見てください！

var array = ['赤', '黄', '白', '緑'];

var result1 = array.slice( 1, 2 );
var result2 = array.splice( 1, 2 );

console.log( result1 );
console.log( result2 );

console.log( array );

出力結果

['黄']
['黄', '白']

['赤', '緑']

このサンプルでは、「slice」「splice」どちらも同じ引数を指定しており、出力結果は違いますが正常に動作しているのが分かります。

どちらも任意の要素を抜き取っているように見えますが、実は「splice」は指定した範囲の要素を削除しており、その削除した要素が戻り値となっている点に注意が必要です！

その証拠に、コードの最後にもう一度「array」要素を出力していますが、「黄, 白」が削除されているため「赤, 緑」だけが出力されているのが分かります。

このことから、「splice」メソッドを使うと元になった配列要素が変更されてしまうのに対して、「slice」メソッドは元の配列を変更しないという特徴もあります。

「slice()」でよくあるエラー

この章では、slice()を使う上でよくありがちなエラーについて見ていきましょう！

主に、「型」を誤認するケースとDOM要素を取得するケースについて学んでいきます。

実は文字列型ではなく数値型になっている場合

まずは、「型」について見ていきましょう！

例えば、文字列同士を連結させるようなケースはよくありますよね。

次のサンプル例を見てください。

var str = '123';
var result = str + 45;
  
console.log(result);
console.log(result.slice(1));

実行結果

12345

2345

この例では、文字列型の「123」と数値型の「45」を＋で連結させています。

JavaScriptでは、＋を使うだけで値を連結できるので、この場合は新しく文字列型の「12345」が作成されます。

そのため、「slice(1)」を実行すれば「2345」が結果として返ってくるわけです。

しかし、＋以外の演算子を使うと数値型に変換されるためエラーになってしまいます。

var str = '123';
var result1 = str * 45;
var result2 = str - 45;

console.log(result1.slice(1));
console.log(result2.slice(1));

この例では、* や – の演算子を使っているためすべて数値型に変換されてしまいます。

slice()は文字列型のメソッドのため、結果的にエラーになってしまうというわけです。

DOM要素を取得したら配列ではなかった場合

次に、よくあるDOM要素を取得するようなケースを見ていきましょう！

例えば、HTML内にあるli要素をすべて取得するようなプログラムを見てみます。

li要素

<body>
 <ul>
  <li>赤</li>
  <li>黄</li>
  <li>白</li>
  <li>緑</li>
 </ul>
</body>

コード

<script>
 var lists = document.getElementsByTagName('li');

 //取得したlist要素を表示
 console.log( lists );

 //list要素にsliceメソッドを使ってみる
 console.log( lists.slice(1, 2) );
</script>

実行結果

[li, li, li, li]
 
Uncaught TypeError: lists.slice is not a function

このサンプルで取得した「list要素」は、配列のようなデータ形式になっています。

ところが、これは配列ではなくHTMLCollectionと呼ばれる要素群のため、「slice」メソッドを使用してもエラーになるわけです。

つまり、「slice」は文字列・配列では使えるけどHTMLCollectionでは使えないというのが分かりますね。

この場合は、次章で解説する「call()」メソッドを使う必要があります。

「slice()」の実践例

call()で他のデータ型を切り抜く方法

「slice」メソッドは、文字列・配列それぞれで利用できるので非常に便利なのですが、逆に言うと他のデータ型だと利用できないということになります。

そこで、ぜひ覚えておきたいのが「関数（Functionオブジェクト）」の組み込みメソッドである「call」です！

このメソッドを使うと、文字列・配列以外のデータ型でも「slice」メソッドが使えるようになります！

次のサンプルを見てください！

<body>
 <ul>
  <li>赤</li>
  <li>黄</li>
  <li>白</li>
  <li>緑</li>
 </ul>
</body>

<script>
 var lists = document.getElementsByTagName('li');

 //callメソッドを使ってsliceを実行
 var result = Array.prototype.slice.call( lists, 2, 3 );

 console.log( lists );
 console.log( result );
</script>

実行結果

[li, li, li, li]

[li]

「call」は、「slice」メソッドを持つ元のオブジェクトから繋げて指定する必要があります。（この場合は配列型のArrayオブジェクト）

引数には、sliceを実行したい要素とsliceで抜き取りたい開始位置と終了位置を指定します。

つまり、「slice( 2, 3 )」を指定しているのと同じ意味になり、「list要素」の3番目だけが抜き取られているのが分かります。

勘の良い方であれば気づいているかもしれませんが、「slice」メソッドだけでなく配列型の組み込みメソッドであればどれでも利用できるのが大きな特徴と言えるでしょう。

map()による繰り返し処理例

mapメソッドとは、与えられた配列の要素に対して一つ一つ処理を加えて別の新しい配列として返すメソッドです。

具体的なサンプルコードは以下の通りです。

【実例】
都道府県情報をもつ配列があり、その１番目のデータ(“全国”)は取り除き、かつ東京都は23区以下からの情報に置換する。

var array = ['全国', '東京都渋谷区', '千葉県浦安市', '東京都渋谷区', '東京都港区', '埼玉県大宮市'];
 
//sliceで開始位置を指定後、メソッドチェーンでmapメソッドの処理が続けて行われる
var result = array.slice( 1 ).map(function(place){
    return place.replace("東京都","");
});

console.log( result );

実行結果

[ '渋谷区', '千葉県浦安市', '渋谷区', '港区', '埼玉県大宮市' ]

サンプル内にて、array.slice( 1 ) の箇所は結果として[ ‘東京都渋谷区’, ‘千葉県浦安市’, ‘東京都渋谷区’, ‘東京都港区’, ‘埼玉県大宮市’]が得られます。

その得られた配列の要素一つ一つに対して、mapメソッドが機能し、”東京都”を””(空文字)に置換(replaceメソッド)する処理を行なっています。

ポイントはsliceメソッドとmapメソッドをドット(.)で結びつけることで、処理を続けて行うことができる仕組み（メソッドチェーン）です。

このようにsliceメソッドで新たに得られた配列の結果をmapなど他のメソッドで継続して処理することもできますので、応用的な使い方としてぜひ覚えておいてください。

なお、mapメソッドについて詳しく学習したい方は以下の記事が参考になります。

「slice()」の基本的な使い方まとめ

この章では、これまで学んだslice()の基本的な切り出し方法についてまとめておきます。

slice()は、Stringオブジェクト（文字列型）とArrayオブジェクト（配列型）それぞれに標準で組み込まれているメソッドです。

例えば、文字列に対してslice()メソッドを使うには次のように記述します。

var str = 'あおあかきいろ';
var result = str.slice( 2, 4 );
 
console.log( result );

実行結果

あか

slice()の引数には、対象となる文字列の切り出し位置を指定します。

この場合は、0文字目から数えて「2文字目~4文字目」の間にある文字を切り出しています。

配列に対して要素を切り出すには次のように記述します。

var array = ['メロン', 'リンゴ', 'イチゴ', 'バナナ'];
 
//開始位置と終了位置を指定
var result = array.slice( 1, 3 );
 
console.log( result );

実行結果

["リンゴ", "イチゴ"]

使い方は文字列の場合とほとんど同じで、slice()の引数に切り出す位置を指定するだけです。

また、Stringオブジェクト・Arrayオブジェクト以外でもslice()を利用する方法としてcall()を使う手法があります。

<body>
 <ul>
  <li>赤</li>
  <li>黄</li>
  <li>白</li>
  <li>緑</li>
 </ul>
</body>

<script>
 var lists = document.getElementsByTagName('li');
 
 //callメソッドを使ってsliceを実行
 var result = Array.prototype.slice.call( lists, 2, 3 );
 
 console.log( lists );
 console.log( result );
</script>

実行結果

[li, li, li, li]

[li]

この例では、NodeListに対してArrayオブジェクへcall()を組み合わせることでslice()メソッドの実行を実現しています。

call()の引数には、対象となるNodeListを設定したあとに切り出す位置を指定すれば良いわけです。

まとめ

今回は、文字列や配列で便利に使える「slice」メソッドについて学習しました！

もう一度、今回のポイントをおさらいしてみましょう！

 

上記の内容を把握しながら、ぜひ自分のプログラムにも取り入れて効率の良いコードが書けるように頑張りましょう！