みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
今回はJavaScriptのslice関数を用いた、文字列の切り出しについて学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- slice関数の使い方がわかる!
文字列を切り出そう
slice関数を使おう
JavaScriptで文字列を切り出すには、slice関数を使用します。
slice関数とは、元の文字列を破壊せずに文字列を切り出すメソッドです。
構文
文字列.slice(開始文字番号, 終了する文字番号);
// 第二引数は省略可能。その場合は指定番号以降の文字を切り出す
このように記述することが出来ます。
5つのポイント
slice関数の使用方法には、以下の5つのポイントがあります。
- 元の文字列は破壊されない
- マイナスをつけると後方検索になる
- 前方検索は0オリジン、後方検索は-1オリジン
- 第二引数は”第一引数からN文字目”ではなく、絶対位置
- 第二引数をもたせる場合は“開始文字番号以降、終了文字未満”
プログラミングでは第一引数以上、第二引数未満という指定が多いよ!
実際に使ってみよう!
“あいうえお”という文字列を切り出してみましょう!
// 0 1 2 3 4
const message = "あいうえお"
// 1文字目以降を切り出し
const newMessage1 = message.slice(1)
console.log(newMessage1)
// 1文字目以降3文字目未満を切り出し
const newMessage2 = message.slice(1,3)
console.log(newMessage2)
// 元の文字列が破壊されていないことの確認
console.log(message);
【出力結果】
いうえお
いう
あいうえお
このように、指定した番号の文字列を切り出すことが出来ました。
slice関数が理解できてえらい!
おまけの問題
以下の2つのメッセージから、文字列を切り出して
「こんにちは、いい天気ですね」
という文字列を出力してください。
- こんにちは、サメハックです。
- 今日はとてもいい天気ですね
まとめ
- 文字列の切り出しにはslice関数を使う
- 文字列.slice(開始文字番号, 終了する文字番号);
- ↑第一引数以降、第二引数未満の文字列を切り出す
おまけの答え
// 0 1 2 3 4 5 6 .......
const message1 = "こんにちは、サメハックです。"
const message2 = "今日はとてもいい天気ですね"
// 0文字目以降、6文字目未満を切り出し
const newMessage1 = message1.slice(0,6)
// 6文字目以降を切り出し
const newMessage2 = message2.slice(6)
// 切り出した文字列を結合
const resultMessage = newMessage1 + newMessage2;
console.log(resultMessage);
これで期待の文字列が出力できました。
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈