今回はJavaScriptのsplit()とその他のメソッドとの組み合わせを紹介していきたいと思います
join( ) / trim( ) / map( ) / slice( ) / reverse( )
コードで解説
・join( )との組み合わせ
組み合わせることで区切り文字の置換ができます(今回は「スペース」→「 , 」 に置換)
join( )については以前こちらで解説してます
const str = "朝 昼 夜";
const result = str.split(' ').join(',');
console.log(result); // 朝,昼,夜
・trim( )との組み合わせ
※trim()は前後の余計なスペースを削除するメソッドです
これと組み合わせて文字列の前後と途中に出てくるスペースを一掃していきます
const s = ' abc, efg, hij ';
const arr = s.trim().split(/\s*,\s*/); // => ["abc", "efg", "hij"]
①ますはtirm( )によって前後のスペースが削除されます(途中のスペースはそのまま)
`abc, efg, hij`
②その後split()と正規表現によって晴れて配列になります
☆今回の区切り文字は正規表現と組み合わせて「前後のスペースを含めたカンマ」としてます
["abc", "efg", "hij"]
・map( )との組み合わせ
map( )については以前こちらで解説してます
map(Number)と組み合わせることで数字の入った文字列を数値型の配列に変換できます
map(Number)が少しややこしく感じるかもですが、
処理としては配列の要素を順番にNumber( )に入れるというものです。
※Number( )は数値に変換する関数です
// 文字列を用意
const numberList = '100,200,300'
// 普通にsplitだけで配列にするとこちら
numberList.split(',')
// ["1", "2", "3"]
// map(Number)と組み合わせると
numberList.split(',').map(Number)
// [1, 2, 3]
・slice( )との組み合わせ
※slice( )は文字列または配列を部分的に取得できるメソッドです
すごくすごく、ややこしいとは思いますが(特に第２引数注意！！)
slice(1, 3)であれば 「indexの1 から indexの3の手前まで (つまり２まで！)」
取得できます
split( )と組み合わせると
const str = "1月 2月 3月 4月 5月";
// indexの1からindex3の手前まで
const result = str.split(' ').slice(1, 3);
console.log(result); // ['2月', '3月']
文字列から任意の箇所を取り出した配列にできます
・reverse( )との組み合わせ
※reverse( )は最初から最後までの順番をひっくり返すメソッドです
// 文字列を用意
const str = "大富豪 平民 大貧民";
// splitで配列にしてreverseでひっくり返す
result1 = str.split(' ').reverse();
// splitとreverseで革命的な配列を作った後に、joinで文字列に
result2 = str.split(' ').reverse().join(' ');
console.log( result1 ); // ['大貧民', '平民', '大富豪']
console.log( result2 ); // 大貧民 平民 大富豪
となります
まとめ
今回のようにメソッドを繋げて処理することは多いのでまた機会ありましたらご紹介します。
ありがとうございました。