JavaScriptで文字列を切り出す3つの方法!【わかりやすく解説】

JavaScript

JavaScriptで文字列を切り出す方法を3つ書いています。
実際に動作するサンプルコードを載せて、挙動を詳しく解説しています。

この記事では下記のメソッドを使用した、文字列の切り出しについて書いています。

・sliceメソッド
・substringメソッド
・substrメソッド(非推奨)

それでは、詳しくみていきましょう。

PR

sliceメソッドを使って切り出す

sliceメソッドは文字列から呼ぶことが可能です。
文字列からsliceメソッドを呼んで、引数を渡します。
そうすると、渡した引数の値によって文字列を切り取ることが可能です。

例えば、下記のように使用します。

let text = "JavaScriptで文字列を切り出す3つの方法!"
let sliceText1 = text.slice(0, 10)
let sliceText2 = text.slice(11)
let sliceText3 = text.slice(-6)

console.log(sliceText1) // JavaScript
console.log(sliceText2) // 文字列を切り出す3つの方法!
console.log(sliceText3) // 3つの方法!

最初にtext変数に「JavaScriptで文字列を切り出す3つの方法!」を代入しています。
次の行からsliceメソッドを使用して、文字列を切り取っています。

text.slice(0, 10)と呼び出して、text変数から文字列を切り出しています。
0から10を引数で渡すことで、文字列の0番目から10文字目までを切り取ります。
結果、sliceText1変数に代入されるのは、text変数の先頭から10文字の「JavaScript」です。

次にtext.slice(11)という形で、11を渡して呼び出しました。
そうすると、11番目から最後までの文字列が返ってきます。
そのためsliceText2変数に代入されるのは「文字列を切り出す3つの方法!」になります。

最後にtext.slice(-6)という形で、マイナスの値を渡して呼び出しています。
こうすると、文字列の末尾から切り取った文字列が返ってきます。
-6を渡しているので、6文字切り取られて、sliceText3に代入されるのは「3つの方法!」になります。

このようにsliceメソッドに渡す引数によって、切り取る場所を柔軟に変えることができます。

sliceメソッドの引数と返り値まとめ

引数と返値について、まとめると下記のようになります。

引数がふたつのとき

引数が2つの場合は、第1引数が切り出しを始める文字位置で、第2引数が切り終わり位置です。
開始位置は文字列の先頭を0番目から数えます。

"りんごはappleです。".slice(4, 9) // apple

第2引数の終わり位置が開始位置と同じか、開始より前の場合は空文字が返ってきます。

"りんごはappleです。".slice(4, 3) // ''

引数がひとつのとき

引数がひとつの場合で、正数を渡した時には、渡した位置から文字列の最後までが返ってきます。

"りんごはappleです。".slice(4) // appleです。

負数の場合は、文字列の末尾から数えて切り取ります。

"りんごはappleです。".slice(-3) // です。

返り値

切り出した文字列が返ってきます。

PR

substringメソッドを使って切り出す

substringメソッドも文字列から呼び出して使えます。
こちらも同じように、渡した引数によって文字列を切り取れます。

let text = "JavaScriptで文字列を切り出す3つの方法!"
let substringText1 = text.substring(0, 10)
let substringText2 = text.substring(11)
let substringText3 = text.substring(-3)

console.log(substringText1) // JavaScript
console.log(substringText2) // 文字列を切り出す3つの方法!
console.log(substringText3) // JavaScriptで文字列を切り出す3つの方法!

最初にtext変数に同じように「JavaScriptで文字列を切り出す3つの方法!」を代入しています。

sliceメソッドと同様にtext.substring(0, 10)と呼び出すことで、先頭から10文字が取得できます。
結果として、substringText1変数に「JavaScript」が代入されます。

text.substring(11)のように、正数をそのまま渡すと、その位置から文字列の末尾までが返ります。
結果、substringText2変数には「文字列を切り出す3つの方法!」が代入されます。

substringは末尾から数えるために、マイナスの値を渡すことができません。
そのためtext.substring(-3)のように、マイナス値を渡しても切り取り元の文字列が返ってくるだけです。

sliceメソッドとの違い

ふたつの引数や正数値をひとつ渡した時の挙動は、sliceメソッドとほとんど同じです。
違いについて、確認していきます。

マイナス値は文字列がそのまま返ってくる

sliceメソッドではマイナス値を渡すと、末尾からの文字列を取得できました。
substringメソッドだと、マイナス値を受け付けずにそのままの文字列が返ってきます。

"りんごはappleです。".substring(-3) // りんごはappleです。

第2引数に開始位置より前を渡すことができる

sliceメソッドでは開始位置よりも前を渡すと、空文字(”)が返ってきました。
substringメソッドだと、数値の小さい方が開始位置になります。

例えば、下記のように使用します。

"りんごはappleです。".substring(4, 1) // んごは

数値が小さい方の1が開始位置になって、0から数えて、1文字目から4番目の文字が取得されます。
結果返ってきているのは「んごは」になります。

substrメソッドを使って切り出す

substrメソッドも文字列から呼び出すことができます。
このメソッドは既に非推奨メソッドになっているので、上記の2つのどちらかを使った方が良いです。
MDNに非推奨ということで記載されています。

使う際には、下記のように使用します。

let text = "JavaScriptで文字列を切り出す3つの方法!"
let substrText1 = text.substr(4, 6)
let substrText2 = text.substr(11)
let substrText3 = text.substr(-6)

console.log(substrText1) // Script
console.log(substrText2) // 文字列を切り出す3つの方法!
console.log(substrText3) // 3つの方法!

substrメソッドは、ふたつ引数を渡した時の挙動がslice・substringと違います。
text変数に同じように「JavaScriptで文字列を切り出す3つの方法!」を代入しています。

text.substr(4, 6)とすることで、先頭から4つ目の文字から6個目まで取得します。
結果として「Script」となります。
このように開始位置と、開始位置からいくつ取得するかを指定します。

正数の場合は先頭から数えた桁数で取得できます。
結果としてtext.substr(11)を指定すると「文字列を切り出す3つの方法!」となります。

負数の場合は末尾から数えた桁数で取得できます。
結果としてtext.substr(-6)を指定すると「3つの方法!」となります。

終わりに

今回はJavaScriptで、文字列を切り出す方法を確認していきました。
substrメソッドは非推奨になっているので、今後は使わない方が良さそうです。

sliceメソッドまたはsubstringメソッドを使うようにしていきましょう。
どちらを使うかは、それぞれの挙動を確認して、状況に合わせて使っていくと良いと思います。

コメント

タイトルとURLをコピーしました