【JavaScript】文字列を切り出そう【slice】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験から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フォローしてもらえると嬉しいです🦈

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