JavaScriptで文字列を切り出す方法を3つ書いています。
実際に動作するサンプルコードを載せて、挙動を詳しく解説しています。
この記事では下記のメソッドを使用した、文字列の切り出しについて書いています。
・substringメソッド
・substrメソッド(非推奨)
それでは、詳しくみていきましょう。
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) // です。
返り値
切り出した文字列が返ってきます。
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メソッドを使うようにしていきましょう。
どちらを使うかは、それぞれの挙動を確認して、状況に合わせて使っていくと良いと思います。
コメント