文字列から一部取り出してみる！slice()について【備忘録】
今回の記事では、文字列から一部を取り出すことができる、slice()メソッドについて紹介していきます！
お恥ずかしながら、今まで、配列をコピーしたいときにslice()メソッドを使ったことはありましたが、文字列では使ったことがありませんでした。
JavaScript勉強し始めたころにテキストとかで勉強したはずなのに...?JavaScript Primerにも書いてあったから学んでいるはずなのに...？
完全に存在を忘れてしまっていました...😱 お恥ずかしい〜😭
しかし！お仕事をしていて、遂に出会えたのです！文字列でslice()メソッドを使って、一部を取り出しているのを！
これはチャンスだと思い、自分の復習として、まとめていきたいと思います。
※今回は、配列については扱いません。
※もし、記事への補足・改善点(修正点)などアドバイスがあれば、コメント頂けますと嬉しいです！
文字列から一部を取り出す、slice()とは？
まずは、公式の説明を見てみましょう。
slice() メソッドは、元の文字列を変更せず、文字列の一部分を取り出し、それを新しい文字列として返します。
文字列の中から指定した部分を取り出すことができるんですね！
文字列.slice() //最初から最後まで
文字列.slice(開始位置) //開始位置の文字〜最後まで
文字列.slice(開始位置, 終了位置) //開始位置の文字〜終了位置の1文字前まで
第1引数には取り出し始める位置のインデックス番号を渡し、第2引数には取り出し終わる位置のインデックス番号を渡します。ただし、この第2引数に渡した位置の文字は含まれず、その1文字手前の文字までが取り出されます。
インデックス番号なので、もちろん0から始まります。
開始位置以上、終了位置未満の範囲の文字列が取り出されるというわけですね！
また、第1引数、第2引数共に負の数を渡すことも可能です！
負の数が渡された場合は、文字列全体の先頭ではなく、末尾から数えます。
ただ、負の数の場合は、インデックス番号で考えるよりも、末尾から位置を数えた方がわかりやすい気がします。
もちろん、文字列の長さ + (引数に渡された負の数)で先頭から数えることもできます。
ちなみに、スペースも1文字としてカウントされます。
なぜ、インデックス番号で指定するの？
配列じゃないのに、なぜ、引数にインデックス番号を指定するのか疑問に感じる方もいるかもしれません。
実は、文字列は配列と同じように、インデックス番号を利用することが可能です。
let sampleStr = 'Hello!';
console.log(sampleStr[0]); //H
console.log(sampleStr[1]); //e
console.log(sampleStr[2]); //l
console.log(sampleStr[3]); //l
console.log(sampleStr[4]); //o
console.log(sampleStr[5]); //!
上記のように、指定したインデックス番号の位置にある文字にアクセスすることができるのです！
どうやって使うの？
それでは話を戻して、今度は、String.prototype.slice()の使い方を見ていきましょう。
クリスマス&年末が近づいてきたので、ここからは次の文字列を使用していきます。
let message = 'Merry Christmas and a Happy New Year!';
①全部取り出してみる
まずは、文字列全部を取り出してみましょう。
console.log(message.slice());
//Merry Christmas and a Happy New Year!
そのまま、文字列全体が返ってきました。
②開始位置のみ指定
今度は、取り出し始める開始位置のみ指定してみましょう。
正の数
まずは、正の数で指定してみます。
console.log(message.slice(20));
//a Happy New Year!
文字列の先頭から数えてインデックス番号20番目の位置にある「a」から、末尾までの文字列を取り出すことができました！
負の数
次に、負の数で指定してみます。
console.log(message.slice(-9));
//New Year!
負の数を使っているので、末尾から数えて9番目の位置にある「N」から、末尾までの文字列を取り出すことができました！
③終了位置も指定
終了位置も指定してみるとどうなるか、やってみましょう。
正の数
まずは、正の数で指定してみます。
console.log(message.slice(6, 14));
//Christma
先頭から数えてインデックス番号6番目の位置にある「C」から、先頭から数えてインデックス番号13番目の位置にある「a」までの文字列を取り出すことができました！
第2引数の終了位置には14を指定していますが、インデックス番号14番目にある文字は含まれず、その1文字手前の文字までが含まれるため、13番目の位置にある「a」までしか取り出されなかったんです。
負の数
次に、負の数で指定してみます、
console.log(message.slice(-21, -10));
//and a Happy
末尾から数えて21番目の位置にある「a」から、末尾から数えて11番目の位置にある「y」までの文字列を取り出すことができました！
こちらも、正の数のときと同じく、末尾から数えて10番目の位置にある「 」(スペース)は含まれません。1文字先の11番目の位置にある「y」までしか取り出されません。
スペースが先頭に来たらどうなる？
これまでは、普通の文字から始まって、文字で終わっていました。
これがもし、第1引数で渡した開始位置にあるのがスペースだった場合どういう結果が返ってくるのかやってみます。
まぁ、あまり実装する機会はない気がする、「こいつ、なんか遊んでるなぁ」程度にサラッとお読みください💦
console.log(message.slice(27));
// New Year!
先頭から数えてインデックス番号27番目にある「 」(スペース)から、末尾までの文字列を取り出すことができました！(他の部分の返ってきた文字列を表示しているコメントアウト部分と比較してみてください。実は、今回、「スペースが先頭に来たらどうなる？」でしか//の後にスペース入ってないんです...。)
非常にわかりにくいので、是非、ご自身の環境で試して頂いた方が良いと思います。
おわりに
個人的には、文字列で使ったことがなかったslice()メソッド。
公式ドキュメントを読んだり検証したりすると、思っていたより奥深いなと思いました！
個人的な復習用記事になってしまいましたが、お読み下さりありがとうございました！
Discussion