split(String、文字列)
このページでは豊富な例を用いてJavaScript(js)のStringオブジェクト(文字列)のsplitの使い方を学ぶことができます。
JavaScript(js)のsplitはStringオブジェクト(文字列)のメソッドの1つです。
第1引数で指定した文字列または正規表現(RegExp
オブジェクト)により分割した文字列を要素とした配列を返り値として返します。
第2引数には分割した文字列を返す数を指定できます。
呼び出し元の文字列に対しては変更を行わない非破壊的なメソッドです。
TL;DR
基本
const string1 = 'apple,banana,kiwi';
const splitArray1 = string1.split(',');
// 返り値は分割された要素で構成された配列
console.log(splitArray1);
==> [ 'apple', 'banana', 'kiwi' ]
// 呼び出し元の文字列には変更なし
console.log(string1);
==> apple,banana,kiwi
// splitの引数に何も指定しない場合
const string2 = 'apple,banana,kiwi';
const splitArray2 = string2.split();
// 分割されずに元の文字列が配列の要素となる
console.log(splitArray2);
==> [ 'apple,banana,kiwi' ]
// splitの引数に空文字''を使用した場合
const string3 = 'split';
const splitArray3 = string3.split('');
console.log(splitArray3);
==> [ 's', 'p', 'l', 'i', 't' ]
// 改行で区切る
const string4 = `javascript
python
java
typescript`;
const splitArray4 = string4.split('\n');
console.log(splitArray4);
==> [ 'javascript', 'python', 'java', 'typescript' ]
正規表現を用いた分割
// 引数に正規表現(RegExpオブジェクト)も指定できます
const string1 = 'apple,banana,kiwi';
const splitArray1 = string1.split(/,/);
console.log(splitArray1);
==> [ 'apple', 'banana', 'kiwi' ]
// キャプチャの丸括弧()を使用することにより、キャプチャした文字列も結果に含むことができます
const string2 = '<div>JS</div><div>TS</div>';
const splitArray2 = string2.split(/(<.*?\/.*?>)/);
// 正規表現に一致した文字列も結果に含まれる
console.log(splitArray2);
==> [ '', '<div>JS</div>', '', '<div>TS</div>', '' ]
// キャプチャの丸括弧()を使用しない場合
const splitArray3 = string2.split(/<.*?\/.*?>/);
// 正規表現に一致した文字列は結果に含まれない
console.log(splitArray3);
==> [ '', '', '' ]
分割した文字列の数を制限する
// 第2引数に分割した要素を返す数を指定できる
const string1 = '1,2,3,4,5';
const splitArray1 = string1.split(',', 2);
console.log(splitArray1);
==> [ '1', '2' ]
// 第2引数に分割された要素数以上の値を指定した場合
const string2 = '1,2,3,4,5';
const splitArray2 = string2.split(',', 10);
console.log(splitArray2);
==> [ '1', '2', '3', '4', '5' ]
// 第2引数に0を指定した場合
const string3 = '1,2,3,4,5';
const splitArray3 = string3.split(',', 0);
console.log(splitArray3);
==> []
const string4 = 'first1second2third3fourth4fifth5';
// 数値を区切りに使う
const splitArray4 = string4.split(/\d/, 3);
console.log(splitArray4);
==> [ 'first', 'second', 'third' ]
解説
基本
Stringオブジェクトのsplitメソッドは第1引数に文字列を指定すると、 指定した文字列で分割した文字列を要素とする配列を返り値として返します。
呼び出し元の文字列に対し、指定した分割文字列の間に文字がない場合は空文字''
が要素として配列に追加されます。
引数で与えた文字列自体も配列の要素に追加したい場合は、次の項で説明する正規表現(RegExp
オブジェクト)の使用を検討してください。
const string1 = 'js-ts-java-py-go';
const splitArray1 = string1.split('-');
console.log(splitArray1);
==> [ 'js', 'ts', 'java', 'py', 'go' ]
const string2 = 'January+++February+++March+++April';
const splitArray2 = string2.split('+++');
console.log(splitArray2);
==> [ 'January', 'February', 'March', 'April' ]
const string3 = '10,20,,,50';
const splitArray3 = string3.split(',');
// 指定した分割文字間に文字がなければ空文字''が要素として追加される
console.log(splitArray3);
==> [ '10', '20', '', '', '50' ]
正規表現を用いた分割
splitの第1引数は文字列の他に正規表現(RegExp
オブジェクト)も指定することができます。
基本的な挙動は文字列を使用した場合と変わりませんが、より柔軟な分割指定をすることが可能となります。
また、正規表現のキャプチャの丸括弧()
を用いることで分割対象の文字列自体も返り値の要素として含めることができます。
const string1 = 'js-ts-java-py-go';
const splitArray1 = string1.split(/-/);
console.log(splitArray1);
==> [ 'js', 'ts', 'java', 'py', 'go' ]
const string2 = '1+2+3';
const splitArray2 = string2.split(/(\+)/);
console.log(splitArray2);
==> [ '1', '+', '2', '+', '3' ]
const splitArray3 = string2.split(/\+/);
console.log(splitArray3);
==> [ '1', '2', '3' ]
分割した文字列の数を制限する
第2引数に数値を指定することで、返り値の配列に含まれる分割した文字列の数を制限することができます。
const string1 = '1 2 3 4 5';
const splitArray1 = string1.split(' ', 2);
console.log(splitArray1);
==> [ '1', '2' ]
// 第2引数に分割された要素数以上の値を指定した場合
const string2 = '1 2 3 4 5';
const splitArray2 = string2.split(/\s/, 10);
console.log(splitArray2);
==> [ '1', '2', '3', '4', '5' ]
// 第2引数に0を指定した場合
const string3 = '1 2 3 4 5';
const splitArray3 = string3.split(/\s/, 0);
console.log(splitArray3);
==> []