String.split()에 대해 알아보자.

split()

split() 매서드는 문자열을 입력받은 구분자를 기준으로 여러개로 나눈 배열을 반환해준다.

주로 코딩테스트 등에서 초기에 주어진 문자열을 원하는 배열의 형태로 바꿀때 시작하는 느낌으로 많이 사용한다.

 

실무에서는 DB에서 받은 데이터가 예를들어 | 라던지 , 로 구분된 문자열을 배열로 변경하는데 자주 사용된다.

음.. 예를들면 "B00|B001|AN001|ZA023" 등의 코드정보가 담긴 문자열을 받았을 때,

"|" 를 구분자로 활용해 ["B00", "B001", "AN001", "ZA023"] 와 같은 배열을 얻어낼 수 있다.

 

구문

String.split()
String.split(separator)
String.split(separator, limit)

 

매개변수

1. separator
   원본 문자열을 나눌 구분자를 입력합니다. 문자열, 혹은 정규식이 들어올 수 있습니다.
   
   아무것도 입력하지 않을 경우 해당 문자열 전체가 하나의 원소인 배열을 반환합니다.
   ex) "abcd". split() : ["abcd"]
   
   "" : 빈문자열을 입력할 경우 각각의 문자가 원소인 배열을 반환받습니다.
   ex) "abcd". split("") : ["a","b","c","d"]
   
   만약 separator이 문자열의 처음이나 끝에 위치 한다면 빈문자열이 생성됩니다.
   ex) "abcd". split("a") : ["","bcd"]
   
   같은 원리로, 원본문자열 전체가 separator로 지정될 경우 빈문자열 두개가 반환됩니다.
   ex) "abcd". split("abcd") : ["",""]
   
   
2. limit
   separator로 나뉜 문자열의 최대 갯수를 지정합니다.
   ex) "abcd".split("", 2) : ["a","b"]
   
   자주 사용되진 않습니다.

 

사용예제 - 기본

const originString = "Hello world";

const emptySplit = originString.split();
console.log(emptySplit)
//['Hello world']

const emptyStringSplit = originString.split("");
console.log(emptyStringSplit);
//['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

const StringSplit1 = originString.split(" ");
const StringSplit2 = originString.split("w");
console.log(StringSplit1);
console.log(StringSplit2);
//['Hello', 'world']
//['Hello ', 'orld']

const firstSplit = originString.split("H");
console.log(firstSplit)
//['', 'ello world']

const lastSplit = originString.split("d");
console.log(lastSplit)
//['Hello worl', '']

const wholeSplit = originString.split("Hello world");
console.log(wholeSplit)
//['', '']

위의 separator 의 몇가지 예제를 살펴보았다. 아직 내가 별 다른 응용방법을 몰라서 그런걸수도있겠지만,

보통 특정 구분자를 기준으로 자르는것 외에는 많이 사용하지 않는다.

 

사용예제 - 정규식

포스팅을 작성하려고 mdn문서를 보다가 정규식을 구분자로 사용할 수 있는걸 알게됐다.

 

const originString2 = "aaaa 123 b2b3 cc1 333ddd";

const regExpSplit = originString2.split(/[^0-9]/);
console.log(regExSplit)
//['', '', '', '', '', '123', '', '2', '3', '', '', '1', '333', '', '', '']

const regExpSplitType2 = originString2.split(/([^0-9])/);
console.log(regExpSplitType2)
['', 'a', '', 'a', '', 'a', '', 'a', '', ' ', '123', ' ', '', 'b', '2', 'b', '3', ' ', '', 'c', '', 'c', '1', ' ', '333', 'd', '', 'd', '', 'd', '']

const regExpSplit2 = originString2.split(/[a,b]/);
console.log(regExSplit2)
//['', '', '', '', ' 123 ', '2', '3 cc1 333ddd']

정규식 특성상 일치하는 모든 문자를 대상으로 잡는거 같은데..

공백이 왜저렇게 많이 생기는지는 모르겠다. 어차피 문자를 제외한 부분을 얻고 싶다면

split 매서드를 단독으로 사용한다기보다 기본적으로 배열로 변경 한 뒤 map(), filter(), 혹은 reduce()등의

매서드를 이용하는게 좀더 편해보인다. 

 

사용예제 - Array 매서드와 조합해서 사용하기

반환값이 Array인만큼 Array의 강력한 매서드들과 조합하여 사용할 경우 시너지가 좋다.

예를 들어, 위의 정규식 예제에서 나온 결과값중 빈문자열을 제거하려면 다음과 같다.

const originString2 = "aaaa 123 b2b3 cc1 333ddd";

const regExpSplit = originString2.split(/[^0-9]/);

const removeSpace = regExpSplit.filter(el => el !== "");

console.log(removeSpace)
//['123', '2', '3', '1', '333']

 

split("")을 단순히 각각의 글자로 자르는 용도로 쓴다면..

단순히 글자를 하나하나 잘라줄 목적이라면 [...String]의 형태로도 원하는 배열을 얻어낼 수있다.

const someString = "Hello";
const splitString = someString.split("");

console.log(splitString)
//['H', 'e', 'l', 'l', 'o']

console.log([...someString])
//['H', 'e', 'l', 'l', 'o']

 

실사용 예제 - url에서 parameter 객체로 얻기

https://frontend-bear.tistory.com?dev=frontend&like=pizza&some=anything

위와 같은 url을 가진 페이지에서 각각의 parameter값을 담은 객체를 만들려면

window.location.search
//?dev=frontend&like=pizza&some=anything

쿼리스트링의 경우 "?"로 시작해서 "&"로 구분되어 지므로
?를 제거하고 &로 나눠주면 된다.

const search = window.location.search;
search.replace("?", "").split("&");
//['dev=frontend', 'like=pizza', 'some=anything']

이다음, reduce를 이용해보자.

const tempArr = search.replace("?", "").split("&");

tempArr.reduce((acc,cur) => {
    const [key, value] = cur.split("=");
    acc[key] = value;
    return acc;
}, {})

//{dev: 'frontend', like: 'pizza', some: 'anything'}

split("&")을 이용해서 나눠진 배열로 만든 뒤, 각각의 원소에서 한번 더 split("=")를 이용하여

parameter의 key와 value를 구했다.