javascript - split()과 join()

우리는 사용자로부터 입력받은 문자 'a'라는 값을 받았다면, a를 담는 바구니(자료형)는 어떤값일까?
   var a = prompt(""); //   "How are you doing?" 입력

 위의 문자열을 사용자로부터 입력받았다고 생각하면, 위의 입력값을 담는 바구니(자료형)는 변수? 아니면 배열? 아니다, 바로 문자열에 저장이 된다.
우리는 조금 더 정확한 표현을 하고 싶다면, 배열에 넣어서 관리하면 된다. 여기서 문자열을 배열에 넣는 것을 도와주는 메소드를 예제를 통해서 살펴보자.

  - java.lang.String.split() [문자열 → 배열] 
 
             사용법 :  java.lang.String.split("구분자");  return "array"

        표현식 : 문자열.split("구분자", 배열요소의 갯수(인덱스 갯수)(생략가능)); 
   
  [ Javascript ]

1. var str = prompt(“”);
2. console.log(str);
3. var split_str = str.split("");
4. console.log("str : "+str);
5. console.log("split_str : "+split_str);

  [ 실행결과 ]

: 사용자에게 입력받은 문자열은 str에 저장이 된다. 그렇다면, str의 자료형은 문자열이 되는것이다. (typeof(자료형)을 통해서 체크해보면 된다.)

 문자열을 구분할때 특정 구분자 Delimeter라고하는데, delimiter를 구분 문자는 문자열의 시작과 끝을 알려주는 문자이며, 문자간의 경계를 알려주는 역할을 한다.  이 구분자를 기준으로 나눠서 배열에 담아 이용한다. 이때, 우리는 위에 사용한 메소드인 split()을 사용한다.
 split()함수에 인자로는 구분자가 넘어가도록 하며, 생략되도 배열에 담겨진다. (한문자씩)

만약에, 위에서 str_split(" ")과 같이 안에 띄어쓰기가 들어간다면, split_str[0]은 "How"가 된다. 전체를 구분짓는 요소가 띄어쓰기가 된 셈이다. 그렇다면 str[1]은 당연히 "are"이 된다.
 그리고 구분자는 해당 배열의 원소로 저장이 될 수 없으므로 띄어쓰기는 구분자 역할을 하고 값은 사라진다.
 



  - Array.prototype.join() [배열 → 문자열] 

   [ Javascript ]

1. var str = "how are you doing?";
2. var split_str = str.split("");
3. console.log("str : "+str);
4. console.log("split_str : "+split_str);
5. var join_str = split_str.join("");
6. console.log("join_str : "+join_str);

   [ 실행결과 ]

: join("")의 결과가 보이는가? 바로 배열요소 원소들을("h", "o", "a" ...) 하나의 문자열로 만들어 준 것이다. 위의 split()의 반대개념이라고 생각하자.

                                       java.lang.String.split()     ↔     Array.prototype.join()       

 join()은 배열의 모든원소들을 문자열로 반환한다. 하지만, 이건 값이 비어있을때 이야기이다. 위의 인자값은 join("");와 같이 아무것도 넣지않았다. 인자값이 빈 값이면, 배열요소 전체를 하나의 문자열로 만들어 반환한다.(하지만 인자값이 join()과 같이 빈값이 아닌, 큰따옴표가없는 상태인 값이 없다면, 아무변화도 없다는 점을 주의하자.)

 join("")의 인자값을 넣으면 배열 인덱스 영역마다 구분자 역할을 하는 문자가 추가된다.

 밑의 몇가지 예제를 통해서 조금 더 깊게 이해하자


예제 1) split과 join사용시 인자값을 따로 주었다면 값이변할까?
  [ Javascript ]

1. var str = "how are you doing?";
2. var split_str = str.split(" ");    //띄어쓰기 삽입
3. console.log("str : "+str);
4. console.log("split_str : "+split_str);
5.  
6. var join_str = split_str.join(""); //띄어쓰기 생략
7. console.log("join_str : "+join_str);

  [ 실행결과 ] : 원래 문자열로 되돌렸더니 정말로 띄어쓰기가 구분자로 있었던게 사라졌다.

  [ Javascript ] : 다시 join에 띄어쓰기를 삽입하자 구분자로 삽입이 시키기

1. var str = "how are you doing?";
2. var split_str = str.split(" ");     //띄어쓰기 삽입
3. console.log("str : "+str);
4. console.log("split_str : "+split_str);
5.  
6. var join_str = split_str.join(" "); //띄어쓰기 추가
7. console.log("join_str : "+join_str);

  [ 실행결과 ] : 구분자인 띄어쓰기가 다시 문자열에 삽입되었다.

예제 2) 입력받은 전화번호의 '-'표시를 지워보자!
  [ Javascript ]

1. var number = prompt("전화번호 입력");
2. var spl_number = number.split("-");
3. var join_number = spl_number.join(" ");
4. console.log(number);
5. console.log(spl_number);
6. console.log(join_number);

  [ 실행결과 ]

예제 3) split("구분자", 인덱스 갯수)을 통해서 배열의 인덱스 갯수를 3개로 제한을 두자.

  [ Javascript ]

1. var str = "how are you doing?";
2. var split_str = str.split(" ");
3. var split_str2 = str.split(" ",3);
4. console.log("str : "+str);
5. console.log("split_str_Length : "+split_str.length);
6. console.log("split_str : "+split_str);
7. console.log("split_str2_Length : "+split_str2.length);
8. console.log("split_str2 : "+split_str2);

  [ 실행결과 ]



마무리 정리해보면, 

 1. 사용자로부터 문자열 str을 입력받았다.

      

             str = “how are you doing?”

 

 2. str,split(“”)사용 – 인자가 비어있으면 하나씩 하나씩 부분 배열의 원소로 부분배열화 시킨다.

          str.split("") =  “h”, “o”, “w”, “ ”, “a”, “r”, “e”, “ ”, “y”, “o”, “u”, “ ”, “d”, “o”, “i”, “n”, “g”, “?”

 

3. split_str.join(“”)사용 – 인자가 빈 값이라면, 구분자를 쉼표로 생각한다.

: 부분배열(“h”, “o”, ... “g”, “?”)은 쉼표로 구분이 되어있다. 그렇다면 join(“”)인자 값이 빈 값이므로 부분 배열화된 것에서 문자열로 만들어 줄 때, 구분자 역할을 하는 문자를 추가하지 않는다. 

 우리는 구분자라는 표현을 썼는데, 여기서 말하는 구분자는 긴 문자열에서 배열로 만들때, 어디까지가 하나의 인덱스 영역인지 구분해 줄 수 있는 문자를 말하는것이다. 또한 배열에서 문자열로 변환시킬때, 배열요소 사이마다 구분자를 포함시켜 하나의 문자열이 반환되는데, 빈 값이면 아무것도 들어가지 않는다.

 왜 우리는 문자열을 배열로만들고 배열을 문자열로 만들필요가 굳이 필요한 과정일까 생각을 할 수 있다. 다음에 살펴볼 메소드로 splice()와 slice()를 공부하기전에 알아두어야 할 과정이라고 생각했다.