JavaScript splitとは？できることや使い方、学習方法も紹介

SHARE

「JavaScript splitってどうやって使うの？」
「JavaScript splitを使って学習したい!」
「JavaScript splitの注意点が知りたい!」

この記事に訪れたあなたはこのような悩みを持っていませんか？

文字列を分解して配列にするのにsplitは便利ですが、どのような場面で使われるのか、いまいちわかりませんよね。

また/[a-z]+/のような特殊記号がsplitによく使われています。しかし「これってどういう意味何だろう？」と困っている人もいるでしょう。

そこで今回はJavaScript splitの使い方や注意点について紹介！splitを使った練習問題や正規表現についても解説していきます。

具体的な内容は以下の通りです。

この記事を読めば、splitを使っていろんな分解ができるようになりますよ。

JavaScript splitとは？

そもそもsplitとは、文字列を指定した文字で分解する機能です。

文字列を使っていると「この文字列を分解して扱いたいな…」と思う場面があるでしょう。そんなときに使えるのがsplitなんですね。

例えば長い文章を『、』で分解したいときに使えます。実際にどのように記述するのか見ていきましょう。

const str = “splitは、指定した文字を分解して、それぞれ配列に入れます。”
console.log(str.split(“、”))
// 実行結果
[ ‘splitは’, ‘指定した文字を分解して’, ‘それぞれ配列に入れます。’ ]

上記のコードを見てみると、split(“、”)で文字列を『、』で分解しているのがわかります。実行結果を見ると、文字列がしっかりと分解されましたね。

また第二引数に数値を入れると、その数値分を分解して配列に入れられますよ。

const str = “splitは、指定した文字を分解して、それぞれ配列に入れます。”
console.log(str.split(“、”,2))
// 実行結果
[ ‘splitは’, ‘指定した文字を分解して’ ]

第二引数に2を入れると、実行結果では分解した2つの要素までが配列に入りました。値を0にすると配列に何も入らない状態で出力されますので頭に入れておくといいですね。

JavaScript splitでできること

splitで文字列を分解できることはわかりましたが、「文字列を分解して何ができるの？」と疑問に思う人もいるでしょう。

実際にsplitは以下のような内容を実現してくれます。

  • 分解した文字列を1行ずつ表示させる
  • 1文字ずつ分解して配列にする
  • 正規表現を使って分解する
  • 空白や改行ごとに分解して配列にする

それぞれサンプルコードを載せてどのように動くのか詳しく解説しますね。

分解した文字列を1行ずつ表示させる

分解された文字列はそれぞれ配列に格納されます。つまり分解した後、配列として扱えるんですね。

例として、分解した文字列を1行ずつ表示させてみます。

const str = “splitは、指定した文字を分解して、それぞれ配列に入れます。”
const list = str.split(“、”)
for(let i=0; i<list.length; i++) console.log(list[i])
// 実行結果
splitは
指定した文字を分解して
それぞれ配列に入れます。

実行結果を見ると、分解した文字列が1行ずつ表示されていますね。

まずは2行目で文字列を分解して、配列を作成しています。そして3行目で配列の各要素を表示させているんですね。

1行ずつ表示させる方法は、長い文字列を改行して表示させたいときなどに便利なので覚えておくといいでしょう。

1文字ずつ分解して配列にする

「文字列を1文字ずつ配列に入れて扱いたい！」と考えている人はいませんか？

文字列を1文字ずつ分解しようにも、指定した文字は消えてしまいどうすればいいのかわからないですよね。

実は、文字列は指定した文字で分解できるだけでなく、1文字ずつ分解する方法もあるんですね。

1文字ずつ分解するには何も指定せずにsplit(“”)で分解します。

const str = “splitは、指定した文字を分解して、それぞれ配列に入れます。”
console.log(str.split(“”))
// 実行結果
[ ’s’, ‘p’, ‘l’, ‘i’, ’t’, ‘は’, ‘、’, ‘指’, ‘定’, ‘し’, ‘た’, ‘文’, ‘字’, ‘を’, ‘分’,
‘解’, ‘し’, ‘て’, ‘、’, ‘そ’, ‘れ’, ‘ぞ’, ‘れ’, ‘配’, ‘列’, ‘に’, ‘入’, ‘れ’, ‘ま’, ‘す’,
‘。’ ]

実行結果を見ると、しっかりと1文字ずつの配列になりましたね。split(” “)ではなく、split(“”)なので間違えないように気を付けましょう。

ちなみに1文字ずつ分解して配列にする方法は、[…str]のようにスプレッド構文で記述する方法でも実現できますので、覚えておくといいですね。

正規表現を使って分解する

冒頭でも話しましたがJavaScriptを学習していると、splitに見たことのないような特殊記号が使われているのを見ませんか？

str.split(/[a-z]+/)

このような記述は正規表現と言われ、特定の文字列を選択して分解できるようにします。『/』で括られているのが特徴ですね。

例えば上記の[a-z]はaからzまでのアルファベットを選択して分解してくれるんですね。

+は直前の1文字以上の同じ文字をすべて選択します。つまり[a-z]+はアルファベットがあったときに、後ろにもアルファベットがあるとすべてを選択してくれるんですね。

実際にコードで実行するとどうなるのか見てみましょう。

const str = “splitは、指定した文字を分解して、それぞれ配列に入れます。”
console.log(str.split(/[a-z]+/))
// 実行結果
[ ‘’, ‘は、指定した文字を分解して、それぞれ配列に入れます。’ ]

splitの部分だけが取り除かれて分解されましたね。まず[a-z]でsが選択され、+でplitも選択されました。

このように正規表現は、ただ文字を指定しただけではできないような分解を実現できますよ。

空白や改行ごとに分解して配列にする

テキストを扱っていると、「空白や改行ごとに分解したい！」と感じる場面はありませんか？

そんなときにsplitで” “や\nを指定すれば空白や改行を分解してくれます。しかし空白は半角の場合もあれば、全角の場合もあるのでどちらにも対応しなくてはいけません。

また改行についてはテキストによって\rだったり、\r\nだったりするので、これらもすべて対応しなくてはいけないんですね。

実はここでも正規表現が役に立ちますよ。以下のコードを見てみましょう。

const str = “splitは　指定した文字を分解して それぞれ配列に入れます。”
console.log(str.split(/ |　/))
const Str = “splitは\n指定した文字を分解して\nそれぞれ配列に入れます。”
console.log(Str.split(/\n|\r|\r\n/))
// 実行結果
[ ‘splitは’, ‘指定した文字を分解して’, ‘それぞれ配列に入れます。’ ]
[ ‘splitは’, ‘指定した文字を分解して’, ‘それぞれ配列に入れます。’ ]

上記のコードを見ると正規表現の中に『|』が使われています。『|』は複数の文字を指定できるようになるんですね。

例えば/\n|\r|\r\n/は\nか\rか\r\nのいずれかが文字列にあれば選択してくれます。複数を選択する正規表現はよく使われるので覚えておきましょう。

JavaScript splitを使った使用例

ここまでsplitでできることを紹介しましたが、実際にどのような場面で使われるのかわからない人もいるでしょう。

そこでsplitを使った使用例を練習問題として載せていきます。splitは以下の内容で使えますよ。

  • 使用例1：配列の要素を分解する
  • 使用例2：分解した要素の数を2倍にする
  • 使用例3：文章から漢字とカタカナのみを取り出す
  • 使用例4：最初の1回のみを分解する
  • 使用例5：[]の中身は分解しないようにする

それぞれサンプルコードも載せていますので、「どう記述するかわからなかった…」と感じた人は、どのようにして動いているのかを考えながら見ていってくださいね。

使用例1：配列の要素を分解する

以下のような配列があったとしたとき、各要素にある『,』を分解して配列に入れてみましょう。

[ “a,b,c” , “d,e” , “f” ]

上記の配列が[“a”,”b”,”c”,…]となればいいわけですね。考え方としては各要素をsplitして分解すれば良さそうですが、この方法だと配列の中に配列ができてしまいます。

配列を1つだけにして分解したい場合は配列をすべてつなげてから分解するといいですよ。

const list = [ “a,b,c” , “d,e” , “f” ]
const str = list.join(“,”)
console.log(str.split(“,”))
// 実行結果
[ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’ ]

要素にある『,』を分解したいので、まずはすべての要素を『,』でつなげます。配列の要素をつなげるにはjoinでできますよ。

その後splitですべて分解しているので、実行結果のようにうまく分解できるわけなんですね。

使用例2：分解した要素の数を2倍にする

次は以下の文字列を分解して、要素の数を2倍にしてみましょう。

“120,240,360,480”

まずは文字列になっているので『,』で分解してあげる必要があります。その後要素の値をすべて2倍にするので、繰り返し処理が使えそうですね。

for文で回すのもいいですが、作成した配列をmapで繰り返すと簡単にコードが書けますよ。

const str = “120,240,360,480”
const list = str.split(“,”).map(num =>{ return num*2 })
console.log(list)
// 実行結果
[ 240, 480, 720, 960 ]

mapは配列の各要素に対して処理してくれます。値を変更した後returnすることによって変更した値を配列に格納してくれるんですね。

上記のコードでは、return num*2で要素を2倍にして配列に入れています。for文を使う場合と比べてもコードの行数が少ないため、とても見やすいですね。

使用例3：文章から漢字とカタカナのみを取り出す

次は以下の文字列から漢字とカタカナのみを取り出してみましょう。

“配列から、漢字とカタカナのみを抽出します。”

文字列から漢字とカタカナを抜き出すので、要らない文字は、。の句読点と『あ』から『ん』までのひらがなになります。

splitで分解しようとしたとき、句読点やひらがなを一度で指定して分解するには正規表現が必要でしたね。

しかしここで、「句読点は、と。でいいけど、ひらがなは『あ』から全部書かないといけないの…？」と困ってしまった人がいるでしょう。

実はひらがなをすべて書かなくてもいい方法があるんです。以下のコードを見てみましょう。

const str = “配列から、漢字とカタカナのみを抽出します。”
const Str = str.split(/[あ-ん、。]+/)
console.log(Str)
// 実行結果
[ ‘配列’, ‘漢字’, ‘カタカナ’, ‘抽出’, ‘’ ]

上記のコードのように『あ-ん』と記述すればすべてのひらがなを取り出せるわけなんですね。

また指定したい文字が連続して続いている場合もありますので、後ろに『+』をつけるようにしましょう。

使用例4：最初の1回のみを分解する

次は以下の文字列から最初の『か』だけを分解させてみましょう。

“配列から、漢字とかカタカナのみを抽出しますか？”

このままsplitで分解してもすべての『か』が分解されてしまうので、正規表現を使うことによって文字列はそのままに、最初の『か』だけを分解していきます。

ではどのように記述するのでしょうか？以下のコードを見てみましょう。

const str = “配列から、漢字とかカタカナのみを抽出しますか？”
const Str = str.split(/(?<=^[^か]+)か/)
console.log(Str)
// 実行結果
[ ‘配列’, ‘ら、漢字とかカタカナのみを抽出しますか？’ ]

実行結果を見るとうまく分解できていますね。コードの2行目を見ると正規表現で「/(?<=^[^か]+)か/」と記述されています。

「なんだこれ？」と感じたのではないでしょうか？実は肯定的後読みが使われていて、直前に指定された文字がある文字列だけを選択してくれるものなんですね。

正規表現の部分を分解して詳しく見ていくと、

文字説明
(?<= A )BBの直前にAがあるならBを選択する
^先頭からの文字
[^A]Aが含まれていない場合、選択する
+1文字以上連続した場合すべて選択

このようになります。つまり上記の正規表現では、先頭から数えて『か』の直前に『か』がふくまれていない場合選択してくれるわけなんですね。

使用例5：[]の中身は分解しないようにする

以下の配列があったとき、splitを使って『,』で分解してみましょう。ただし[]内の『,』は分解しないようにします。

“配列から,[漢字,カタカナ]を,抽出しますか？”

このまま『,』で分解してしまうと、[]内の『,』も分解されてしまうので、正規表現を使えば良さそうですね。

ではどのように記述すればいいのか見ていきましょう。

const str = “配列から,[漢字,カタカナ]を,抽出しますか？”
const Str = str.split(/,(?![^[]*])/)
console.log(Str)
// 実行結果
[ ‘配列から’, ‘[漢字,カタカナ]を’, ‘抽出しますか？’ ]

実行するとちゃんとできましたね。コードの2行目を見ると、正規表現で『/,(?![^[]*])/』が使われていますね。

この正規表現は否定的後読みといわれ、直後に指定した文字がない場合のみ選択するようにしています。

「どうなっているんだ？」とわからない人もいると思いますので詳しく見ていきましょう。

文字説明
B(?! A)Bの直後にAがないなら、Bを選択する
[^A]Aが含まれていない場合、選択する
[　]特殊記号[]を選択
*0文字以上連続した場合すべて選択

これらを踏まえて上記の正規表現を訳すると、『,』の直後に『[』が含まれず、『]』が含まれる文字列以外をすべて選択してくれるわけなんですね。

JavaScript splitの注意点

splitは様々な用途に使えることがわかりましたが、以下のような気を付けるべきポイントもあります。

注意
  • 注意点1：文字列のみにしか使えない
  • 注意点2：連続した文字を分解すると空要素ができてしまう

もしエラーが起きたり、表示がおかしくなったりした場合は、どう対処すればいいのでしょうか？それぞれの対処法について見ていきましょう。

注意点1：文字列のみにしか使えない

splitは数値など、文字列以外のものに使うとエラーを起こしてしまいます。

const str = 2221000
console.log(str.split(1))
// 実行結果
console.log(str.split(1))
^
TypeError: str.split is not a function

上記のコードは数値2221000に対して1で分解しようとしていますが、実行するとタイプエラーを起こしてしまいました。

splitはStringオブジェクトに組み込まれたメソッドです。つまり文字列にのみ使えるメソッドとも言います。

そのため別のオブジェクトでは実行がされずエラーになるわけなんですね。

「数値をどうしても分解したい！」と考えている人は一度文字列に変換しましょう。

const str = 2221000
console.log(String(str).split(“1”))
// 実行結果
[ ‘222’, ‘000’ ]

上記のコードのようにString()を使うと文字列に変換し、分解できるようになりますよ。

注意点2：連続した文字を分解すると空要素ができてしまう

またsplitは連続した文字を分解すると空の要素を作ってしまいます。以下のコードを見てみましょう。

const str = “abcdefff”
console.log(str.split(“f”))
// 実行結果
[ ‘abcde’, ‘’, ‘’, ‘’ ]

文字列の末尾には『f』が連続しており、このまま分解すると実行結果のように空の要素が3つできてしまいます。

正規表現で『/f+/』にして分解しても、空の要素が1つできてしまうんですね。「空の要素をなんとかして消したい！」と考えている人はfilterで空の要素を削除しましょう。

const str = “abcdefff”
const Str = str.split(“f”).filter(n=>{return n != “”})
console.log(Str)
// 実行結果
[ ‘abcde’ ]

filterで要素の値が空でないときに、returnして配列に入れます。そのため空の要素だけを削除した配列ができるんですね。

JavaScript splitを学習する方法

splitの使用例を一通り紹介してきましたが、「まだよくわからない…」と感じる人もいるのではないでしょうか？

特に正規表現を使ったsplitは複雑なものも多く、慣れるまで時間がかかってしまうものですよね。

ここでは「もっと理解を深めたい！」と考えている人のために、splitを学習する方法を紹介します。主な学習方法は以下の通りです。

  • 本で学習・勉強する
  • サイトで学習・勉強する

それぞれ学習するときのポイントを載せながら解説しますね。

本で学習・勉強する

JavaScriptの参考書なら環境の開発から一通りの機能を学習できます。splitはもちろん、正規表現についても学べるんですね。

参考書1冊でJavaScriptをマスターできるのはとても魅力的ですよ。

またサンプルコードが多く載っていたり、図解が多かったりとサイトに載っているものよりも分かりやすい参考書が多く、独学でも学習しやすいんですね。

おすすめの参考書は以下の記事で紹介していますので、どの参考書がいいのか迷っている人は参考にしてみて下さい。

→【2021年最新】Javascriptおすすめ学習本・参考書13選！初心者から経験者まで

サイトで学習・勉強する

サイトは自分が持っている疑問や悩みをすぐに解決してくれます。

例えば「文字を1文字ずつ分解したい！」と考えたときに、ネットで調べると解決方法が多く載っているんですね。

そのためサイトで学習する方法は、JavaScriptをある程度理解している人におすすめですよ。

JavaScript初心者でも一から学べるサイトは多くあります。中でも特におすすめしたい３つのサイトがこちら。

これらのサイトは参考書と同じように開発環境からしっかりと解説されているので、初心者におすすめですよ。

まとめ

今回はJavaScript splitについて解説しました。

splitは文字列を分解するだけでなく、1文字ずつ分解したり、分解した一部の要素だけを配列に入れたりと様々な操作ができます。

また正規表現を使うと複数の文字を指定して分解できるんでしたね。splitはマスターしておくととても便利な機能として使えるので、日ごろから使って慣れておくといいでしょう。

特に正規表現はsplit以外でも使われる場面は多くあります。この機会に正規表現も使い慣れておくといいですよ。

前の記事

JavaScript arrayとは？できることや配列の操作方…

次の記事

フリーランスデザイナーが参考にするべきポートフォリオおすすめ1…