文字列を分割して中身を配列にする方法【TypeScript】

APIのレスポンスで数値の配列を取得する場合、以下のように括弧で囲まれた文字列が返ってきた経験はありませんか？

numList: "[1, 100]"

単純な数値であれば中身を取り出すだけで良いのですが、この場合は文字列でかつ括弧が含まれてしまっているので、ひと工夫が必要になります。

括弧の位置が決まっているのであれば、その部分だけ削ってからカンマで分割して取り出すこともできるのですが、せっかくなら正規表現を使ってサクッと取り出したいですよね。

もしかしたら困っている人がいるかもしれませんので、そのような方の検索時間の節約になればと思い、記事にすることにしました。

そんなわけで、今回は文字列を分割して中身を配列にする方法についてご紹介しますね。

ちなみに、言語はTypeScriptです。

正規表現で置き換えて分割すればOK

それでは順番にみていきましょう。

邪魔な文字はreplace()で空文字に置き換えましょう！

対象となる文字列に邪魔な文字が含まれている場合は、その文字を空文字で置き換えてみましょう。

例えば、”[1,100]”という文字列を”1,100″という文字列にするイメージです。

TypeScript（JavaScript）で文字列を置き換える場合は、replace()を使います。

replace() メソッドは、pattern にマッチした文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。pattern は文字列または RegExp、replacement は文字列または各マッチで呼び出される関数です。pattern が文字列の場合、最初に一致した箇所のみを置き換えます。

MDN web docs : String.prototype.replace()

これで空文字に置き換えれば良いのです。

正規表現を組み合わせましょう！

しかし、「最初に一致した箇所のみを置き換え」るので、このままでは前と後ろの括弧のどちらかしか置き換えることはできません。

 const text = "[1,100]";
 const hoge = text.replace("[", "");
 console.log(hoge); // 出力結果 ==> 1,100]

今回は当てはまる文字をすべて置き換えたいので、ここでは正規表現を使いましょう。

前部分の括弧（[）か後ろ部分の括弧（]）のどちらかに当てはまれば、すべて空文字に置き換えるように指定します。

 const text = "[1,100]";
 const hoge = text.replace(/\[|\]/g, "");
 console.log(hoge); // 出力結果 ==> 1,100

これで邪魔な括弧は除外することができましたので、あとはカンマで分割するだけですね。

sprit()で分割して配列にしましょう！

文字列を分割する場合はsplit()を使います。

split() メソッドは、指定した separator 文字列を使って分割する箇所を決定し、文字列を複数の部分文字列に区切ることにより String オブジェクトを文字列の配列に分割します。

MDN web docs : String.prototype.split()

完成形は以下となります。

 const text = "[1,100]";
 const hoge = text.replace(/\[|\]/g, "").split(",");
 console.log(hoge); // 出力結果 ==> [ '1', '100' ]

無事にカンマ区切りでの配列として取り出すことができました。

今回の正規表現のざっくり解説

今回使った正規表現についてですが、スラッシュの後ろにgを指定しています。

text.replace(/\[|\]/g, "").split(",");

gはグローバルサーチを意味するので、文字列中の最初の1個だけではなく、当てはまるものすべてを置き換えの対象にしております。

あとは、置き換えの対象として[と]をそれぞれエスケープしてパイプでつないだだけです。

少し難しく感じるかもしれませんが、慣れてしまえば大丈夫ですので、コツコツと覚えていきましょう。

正規表現について詳しく知りたい方は、以下のドキュメントが参考になると思います。
参考：MDN web docs : 正規表現

終わりに

今回は文字列を分割して中身を配列にする方法についてご紹介しました。

内容をまとめると以下のようになります。

正規表現は慣れてしまえばとても便利な機能です。

最初は暗号のようで混乱してしまうかもしれませんが、覚えるための近道は実際に使ってみる事だと思いますので、ぜひ開発で少しずつ使って慣れてみてください。

それでも取っ付きにくいと感じる方には以下の本がおすすめです。

実践的な課題をこなしていくタイプの学習本ですので、実際に手を動かしながら反復学習をすることができます。

問題も簡単なものから順に用意されていますので、少しずつ「分かっていく」感覚を得ながら進めることができると思います。

私もまだまだ勉強中ですので、一緒に頑張りましょう！

今回はここまでです。それでは。