みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回はsliceを使ってテキストや配列の要素を切り出す方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- テキストを切り出すことが出来る
- 配列の要素を切り出すことが出来る
【JavaScript】配列の作り方【array】
この記事を読むと・・・
配列の作り方がわかる
配列のデータの取得ができる
配列とオブジェクトの違いがわかる
配列操作を覚えよう!
配列の知識がない人はこの記事を参考にしてね!
配列の知識がない人はこの記事を参考にしてね!
テキストを切り出そう
テキストを切り出す構文※第一引数のみ
テキスト.slice(開始位置);
テキストの開始位置”以降”の文字列が取得できるよ!
以降なので開始位置のテキストも含むよ!
以降なので開始位置のテキストも含むよ!
実際に動かしてみよう!
Â// テキストの宣言
const txt = "0123456"
// txtの四番目以降を取得
const newTxt = txt.slice(4);
console.log(newTxt);
【出力結果】
456
ちなみにsliceは非破壊関数なので、
もとの配列には影響がないよ!
もとの配列には影響がないよ!
テキストを切り出す構文※第二引数あり
テキスト.slice(開始位置, 終了位置);
テキストの開始位置の文字は取得されて
終了位置の文字は取得されないよ!
第一引数”以上”第二引数”未満”の文字が取得出来る、と覚えよう!
終了位置の文字は取得されないよ!
第一引数”以上”第二引数”未満”の文字が取得出来る、と覚えよう!
実際に動かしてみよう!
// テキストの宣言
const txt = "0123456"
// txtの2文字目以上5文字目未満を取得
const newTxt = txt.slice(2, 5);
console.log(newTxt);
【出力結果】
234
配列を切り出そう
配列を切り出す構文※第一引数のみ
配列.slice(開始位置);
配列の開始位置”以降”の要素が取得できるよ!
以降なので開始位置の要素も含むよ!
以降なので開始位置の要素も含むよ!
実際に動かしてみよう!
// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック", "やぎハック"];
// 配列の2番目以降の要素を取得
const newUserList = userList.slice(2);
console.log(newUserList);
【出力結果】
[ 'いぬハック', 'やぎハック' ]
ちなみにsliceは非破壊関数なので、
もとの配列には影響がないよ!
もとの配列には影響がないよ!
配列を切り出す構文※第二引数あり
配列.slice(開始位置, 終了位置);
配列の開始位置の要素は取得されて
終了位置の要素は取得されないよ!
第一引数”以上”第二引数”未満”の要素が取得出来る、と覚えよう!
終了位置の要素は取得されないよ!
第一引数”以上”第二引数”未満”の要素が取得出来る、と覚えよう!
実際に動かしてみよう!
// 配列の宣言
const userList = ["サメハック", "ねこハック", "いぬハック", "やぎハック"];
// 配列の1番目以上3番目未満の要素を取得
const newUserList = userList.slice(1, 3);
console.log(newUserList);
【出力結果】
[ 'ねこハック', 'いぬハック' ]
まとめ
- 配列.slice(index) → index番目以降の要素を取得
- 配列.slice(index1, index2) → index1番目以上index2番目未満の要素を取得
- sliceは非破壊関数なので、もとの配列に影響はない
今回は要素の取得についてでしたが、
要素の削除方法について知りたい方は
こちらの記事を参考にしてください
【JavaScript】配列の先頭,最後,指定位置の要素を削除しよう!【pop,shift,splice】
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈