【初心者必見】JavaScriptのslice()の使い方について解説します

本日は


【初心者必見】JavaScriptのsliceの使い方について解説します


というテーマで記事を書かせて頂きます。

この記事をオススメしたい方

・JavaScriptを勉強されている方

・文字列の特定の抜き出し方を知りたい方

・slice()って何やねん！と思ってる方

この記事を書いている人

slice()メソッドとは

slice()とは、文字列から部分的に文字を切り出したい場合に使うメソッドです。

文字列だけではなく配列を切り出す場合にも使えるメソッドとなっていますね。

sliceを使う場面とは

・文字列の○文字目〜○文字目までを取り出したい時

・文字列の○文字目意向を全て取り出したい時



上記のように文字列を処理する場面で使うメソッドになります。

See the Pen MWJoGZp by shino (@rytym0720) on CodePen.

slice()の基本的な使い方

slice()の基本的な使い方は以下の通りです。

文字列.slice(開始インデックス,終了インデックス);

開始インデックスと終了インデックスに数値を入れて、その間の数値を抜きとるメソッドになります。

例文を以下に記載しておりますのでご覧ください。

See the Pen oNBeWYJ by shino (@rytym0720) on CodePen.

解説

//①
'こんにちは'.slice(0,3); //こんに

//②
'こんにちは'.slice(0); //こんにちは(引数省略した際は全ての文字を返します)

//③
'こんにちは'.slice(-2); //ちは

①ですが、「こんにちは」を0から3の間、つまり"こんに"を抜き出しています。

と思われるかもしれませんが、配列と同じように文字列も1ではなく0から始まります。

そのため”こ”は0になるわけですね。

②についてですが、インデックスに0しか入れない場合は全文字を返します。

③ですが、-2という数値になっています。

こちらはマイナスの数値にすることで、後ろから○個目、という形で数値を数えます。

そのため、こんにちはの後ろから２文字である、「ちは」が抜き取られているというわけですね。

substring()とslice()の違い

同じ文字列を切り出すメソッドとして、substring()があります。

似たようなメソッドですが、二つには明確な違いがあります。

'文字列'.slice(開始地点,終了地点)

'文字列'.substring(開始地点,開始地点から何文字抜き取るか)

上記のように、slice()が開始地点と終了地点で抜き出せるメソッドなのに対し、substring()は開始地点と、開始地点から何文字抜き出すかを引数で決めます。

第1引数が第2引数よりも大きい場合の挙動

第1引数が第2引数よりも大きい場合の挙動も異なります。以下の例をご覧ください。

'こんにちは'.slice(1,3)//結果　""

'こんにちは'.substring(3,1) //結果　んに

slice()は空文字を返しますが、substringは3と1を反転させて(1,3)として返しています。

このようにsubstringの方が少し臨機応変に対応してくれる感がありますね。

引数が負数の時の挙

substringは引数が負数の場合、0とみなします。つまり以下のような形です。

'こんにちは'.substring(-2,3)//結果　こんに

'こんにちは'.substring(1,-2) //結果　こ

1つめは、-2が0になります。

つまり(-2,3)→(0,3)として処理される為、結果は「こんに」になるというわけです。

二つ目も同じく-2が0になり、第1引数が第2引数よりも大きい為入れ替わります。

そのため、(1,-2)→(1,0)→(0,1)となり結果は「こ」となるわけです。

sliceの場合は、第2引数が文字列の一番後ろから数えた場所での切り抜きとなります。

'こんにちは'.slice(-2,3);//結果　""

'こんにちは'.slice(1,-2); //結果　んに

終わりに

いかがでしたでしょうか。

文字列の切り出しは画像ファイルの自動更新やゼロ埋め、フォームのバリデーションなどで使う事が多々あります。

少し地味(?)ですが使い方を覚えておくと便利なメソッドですのでこの機会にに是非習得してみてください。

それでは明日の記事でお会いしましょう✨

おしまい✨