【JavaScript】よく使う文字列切り出し・分割(slice、split)

JavaScript

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在フリーランスエンジニアとして活動しています。

Webシステム開発とかしててこう思ったことはありませんか?

これの文字列、、、切り取りたい。。。

ということで、今回は、文字列を切り取る際によく使う「slice」と「split」について紹介していきます〜。

この記事は以下のような人向けです。

「slice」や「split」を使った文字列の切り出し・分割方法を知りたい。。。

では、参りましょう〜。

スポンサーリンク

 sliceとsplitの違い

まず、sliceとsplitの用途の使い方の違いのポイントを話しておきます。

簡単に言えば、

  • sliceは、文字列.slice(開始位置(,終了位置))と数字を使って切り出す
  • sliceは文字列データ
  • splitは、文字列.split(区切り文字)と文字を使って分割する
  • splitは配列データ

という違いがあります。

sliceと同じように数字で指定して切り出す方法に、

  • 文字列.substr(開始位置(,文字数))
  • 文字列.substring(開始位置,終了位置)

のように、「substr」「substring」を使った切り出し方法もあります。

しかし、経験上、sliceでこと足りることがほとんどなので、上の二つについてはここでは深く説明いたしません。

sliceの出番が多い!

以下で、「slice」と「split」の使い方について詳しく説明していきます。

 sliceを使った切り出し

まず、sliceについて説明していきます。

一般構文

sliceの一般的な使い方は、

になります。

開始位置と終了位置

開始位置には、文字列の「何」文字目の後から切り取るかを数字で入れます。

開始位置にマイナスの値を入れると、数字は後ろから「何」文字目の前までを切り取るかを表すことができます。

終了位置には、文字列の「何」文字目までを切り取るかを数字で入れます。

開始位置と同様に、終了位置にもマイナスの値を入れることができます。

その場合は、後ろから「何」文字目までを切り取るかを指定できるようになります。

また、sliceでは終了位置は省略可能になります。

具体例

実際に具体例をみた方がわかりやすいので、具体例をいくつかをあげます。

具体例1:開始位置(プラス)

See the Pen QREVyY by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

具体例2:開始位置(マイナス)

See the Pen vwKzGe by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

具体例3:終了位置(プラス)

See the Pen QREVNY by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

具体例4:終了位置(マイナス)

See the Pen LoZJZx by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

 splitを使った分割

お次は、splitの使い方の説明です。

一般構文

splitの一般的な使い方は、

になります。

splitは切り出しではなく、分割するもので、文字列ではなく、配列が出てきます。

そのため、for文と一緒に使うことが多いです。

区切り文字

split()の中に入る区切り文字には、

  • 「-」
  • 「/」
  • 「,」

のような文字が入ることが多いです。

また、区切り文字には正規表現も使えます。

例えば、

  • 改行の「\r\n」

などを入れることもできます。

具体例

splitを使った具体例を出していきます。

具体例1:「/」で分割

See the Pen MdeqmW by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

具体例2:「,」で分割

See the Pen RmRYgQ by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

具体例3:「改行」で分割

See the Pen JqKaOW by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

※↑やむ終えずjs内で改行をつけた文字列を定義していますが、正規表現も使っていない改行の入った文字列でも正常に機能します。

 まとめ

以上、文字列を切り出す「slice」と「split」の紹介をしました〜。

結構使う出番がありますので、ぼんやりこういうことができるものあったなと覚えていってください!

以上で、なっちる先生の授業を終わります。

素敵なJavaScriptライフを〜!

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