文字列から配列を作るsplit()メソッド【備忘録】
こんにちは。
もう12月も終盤で、そろそろ2021年も終わってしまいますね...。
...っていうことで、今回は、2021年のお仕事における(まだまだ未熟な)個人的ナイスプレーだと思った、「文字列から配列を作る」メソッドについて紹介します！
※もし、記事への補足・改善点(修正点)などアドバイスがあれば、コメント頂けますと嬉しいです！
文字列から配列を作る
文字列から配列を作成するためには、split()メソッドを使います。
split()メソッドとは？
split()メソッドとはどういうものなのでしょうか。
まず、公式を確認してみます。
split() メソッドは、 String を指定した区切り文字列で分割することにより、文字列の配列に分割します。
文字列を、カンマ(,)などの指定した区切り文字で区切ってそれぞれを要素とし、配列を作成することができるメソッドだということがわかりました。
文字列.split(区切り文字);
区切り文字に何も指定しないで実行すると、文字列全体が1つの要素となります。
また、第2引数に要素の数を指定することも可能です。
文字列.split(',', 3); // カンマごとに区切られた文字列の先頭から3単語までが要素となる
具体例
ここからは、具体的にどういう使い方をしてどのような値が返ってくるのかを見ていきます。
今回は、次のような文字列を使用します。
let sampleStr = 'Hello world, hello JavaScript';
①区切り文字を指定しない場合
まずは、split()メソッドの引数に何も渡さずに実行してみます。
何も渡さないというのは、「空文字」を渡すわけではありません。文字通り、何も渡しません。
console.log(sampleStr.split());
// ['Hello world, hello JavaScript']
区切り文字を指定しないで実行すると、文字列全体が、1つの要素となっている配列が返ってきました！
念の為、要素の数を確認してみましょう。
console.log(sampleStr.split().length);
// 1
1と返ってきました。
文字列全体で1つの要素になっているため、もちろん、要素の数は1つですね。
②区切り文字に半角スペースを指定した場合
次に、半角スペースを区切り文字に指定して配列を作ってみます。
console.log(sampleStr.split(' '));
// ['Hello', 'world,', 'hello', 'JavaScript']
文字列に含まれている半角スペースを区切りとして、4つの要素に分けられ、配列が返ってきました。
念の為、要素の数を確認してみましょう。
console.log(sampleStr.split(' ').length);
// 4
予想通り、4と返ってきました。
区切り文字に半角スペースを指定すると、半角スペースのところで区切られた、4つの要素を含む配列が作られました。
③区切り文字に空文字を指定した場合
それでは、split()メソッドの引数に空文字を渡してみます。
console.log(sampleStr.split(''));
//['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', ',', ' ', 'h', 'e', 'l', 'l', 'o', ' ', 'J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']
かなりの数の要素を持つ配列が返ってきましたね！
文字列に含まれる1文字1文字がそれぞれ1つの要素となっています。もちろん、カンマ(,)や半角スペースも、1つの要素になっています。
念の為、要素の数を確認してみましょう。
console.log(sampleStr.split('').length);
// 29
29と返ってきました。
区切り文字に空文字を指定すると、カンマ(,)・半角スペースを含めて29文字がそれぞれ要素として含まれる配列が作られました。
④要素の数を指定してみる
今回は、第2引数に数を渡し、配列に含める要素の数を指定してみましょう。
指定する数は、5とします。
console.log(sampleStr.split('', 5));
// ['H', 'e', 'l', 'l', 'o']
第1引数の区切り文字には空文字を渡しているので、文字列に含まれる1文字1文字がそれぞれ1つの要素になります。
しかし、第2引数に5を渡しているため、先頭から数えて5文字が要素として含まれる配列が返ってきました！
ちなみに...
今回お仕事では、カンマ(,)区切りになっている環境変数の値を使って処理を行うものでした。
例えば、以下のようなケースです。(Vue.jsを利用しています。)
※環境変数名・値ともに仮です。
VUE_APP_ENV_DATA="https://www.google.com/chrome/,https://www.mozilla.org/ja/firefox/,https://www.microsoft.com/ja-jp/edge"
環境変数として、カンマ(,)区切りで3つのURLが格納されています。
別の配列の値と位置が対応しているので、この環境変数の値を配列にする必要があったんです。
そこで、以下のような感じで、split()メソッドを利用したわけです。
process.env.VUE_APP_ENV_DATA.split(',');
// ['https://www.google.com/chrome/', 'https://www.mozilla.org/ja/firefox/', 'https://www.microsoft.com/ja-jp/edge']
区切られていた環境変数の値が、区切り文字として指定したカンマ(,)の部分で区切られ、それぞれが要素となった配列を作ることができました。
おまけ〜関連するメソッド〜
ここまでは、文字列を配列にすることができるsplit()メソッドについてご紹介してきました。
関連するメソッドとして、配列を文字列にすることができるjoin()メソッドについてもご紹介致します。
join()メソッドとは？
join()メソッドとは、どういうものなのでしょうか？
まず、公式を確認してみます。
join() メソッドは、配列 (または配列風オブジェクト) の全要素を順に連結した文字列を新たに作成して返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。
配列の要素を指定した区切り文字で区切った、1つの文字列が返ってくるメソッドだということがわかりました。
配列.join(区切り文字);
具体例
ここからは、具体的にどういう使い方をしてどのような値が返ってくるのかを見ていきます。
今回は、次のような配列を使用します。
let sampleArry = ['あいうえお', 'かきくけこ', 'さしすせそ'];
①区切り文字を指定しない場合
まずは、区切り文字を指定しない場合です。
console.log(sampleArry.join());
// あいうえお,かきくけこ,さしすせそ
配列の要素がカンマ(,)で区切られて文字列として返ってきました。
本当に文字列で返ってきているのか、一応確認してみましょう。データ型を調べるときには、typeofを使います。
console.log(typeof sampleArry.join());
// string
stringと返ってきました。文字列で返ってきていることが確認できました。
区切り文字を指定せずに実行すると、カンマで区切られた文字列が返ってきました。
②区切り文字に空文字を指定した場合
次に、区切り文字に空文字を指定してみましょう。
console.log(sampleArry.join(''));
// あいうえおかきくけこさしすせそ
区切り文字で区切られていない文字列として返ってきました。
こちらも、一応データ型を調べてみます。
console.log(typeof sampleArry.join(''));
// string
stringと返ってきました。文字列で返ってきていることが確認できました。
区切り文字に、空文字を指定すると、配列の要素が全てつながった状態の文字列が返ってきました。
③区切り文字に半角スペースを指定した場合
最後に、区切り文字に半角スペースを指定してみましょう。
console.log(sampleArry.join(' '));
// あいうえお かきくけこ さしすせそ
半角スペースで区切られた文字列が返ってきました。
こちらも、一応データ型を調べてみます。
console.log(typeof sampleArry.join(' '));
// string
stringと返ってきました。文字列で返ってきていることが確認できました。
区切り文字に、半角スペースを指定すると、配列の要素が半角スペースで区切られた文字列が返ってきました。
おわりに
今回は、文字列を配列にするsplit()メソッドを中心にご紹介しました。
お読み下さり、ありがとうございました！
そして、2021年、皆さんお疲れ様でした〜！
Discussion