JavaScriptのsliceメソッドを使って文字列を抽出する方法

初心者向けにJavaScriptのsliceメソッドを使って文字列を抽出する方法について解説しています。sliceメソッドは文字列から指定の範囲を取得する際に使用されます。範囲指定の書き方、substringメソッドとの違いについて学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのsliceメソッドを使って文字列を抽出する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

sliceメソッドを使って文字列を抽出する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

sliceメソッドとは

sliceメソッドは文字列の中の指定した範囲の文字や配列内の範囲指定された値を切り抜くメソッドです。

 

sliceメソッドの使い方

以下は、sliceメソッドの使い方を示すコード例となります。

slice(start[, end])

引数

・start 範囲指定の開始位置インデックス

・end  範囲指定の終了位置インデックス

 

endを省いた場合は開始位置から文字列の末尾まですべてを切り取ることが可能です。

 

“Hello world”という文字列にsliceメソッドを使って”world”という文字列のみ取得したい場合は、以下のように記述しましょう。

"Hello world".slice(6);

// "world"

 

“Hello”を取り出したい場合は、以下のようになります。

"Hello world".slice(0,4);

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

sliceメソッドの注意点

sliceメソッドの注意点として、対象オブジェクトの範囲指定された文字列を「新しい文字列オブジェクト」として切り取っています。

そのためsliceは対象オブジェクトを変更するものではありません。

var strObj = "Hello world";

var sliceObj = strObj.slice(6);

console.log(sliceObj); // "world"

console.log(strObj);    // "Hello world"

 

sliceメソッドとsubstringメソッドの違い

文字列から指定した範囲で文字を切り出すメソッドとしてsliceと似たような性質をもつsubstingメソッドがあります。

一般的に使用されるような方法(slice(0,6) substring(0,6))では同じ挙動を行います。

しかし、いくつかの条件で異なった挙動となるため、その条件をみていきましょう。

 

・start(第一引数) > end(第二引数) の時

第一引数が第二引数よりも値が大きい場合、以下のように挙動が別れます。

 

var strObj = "Hello world";

slice

strObj.slice(6,0);  //  ""     空文字が返却される



substring

strObj.substring(6,0);  //"Hello " 引数を逆転して処理を行い返却する

 

・第二引数に負の整数が入ったとき

slice

strObj.slice(0, -6);  //  "Hello"  負の整数の場合、末尾からの文字数になる



substring

strObj.substring(0, -6);  //  ""  負の整数は0にキャストして処理を行う よって(0,0)になる

 

執筆してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

JavaScriptのsliceメソッドを使って文字列を抽出する方法がわかって良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。