POTATO THAT WANT TO BE HUMAN

[JavaScript] split()을 사용해 문자열을 배열로 반환하기 본문

FRONTEND/JavaScript

[JavaScript] split()을 사용해 문자열을 배열로 반환하기

녜힝 2022. 8. 12. 15:56
반응형

자바스크립트에서 split 함수를 사용하면 

문자열을 일정한 구분자로 잘라서 배열로 저장할 수 있습니다.

 

 

🤔 split() 사용하기

string.split(separator, limit)

 

split 함수는 문자열을 첫번째 파라미터인 separator를 기준으로 잘라서, 

두번째 파라미터인 limit 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴합니다.

 

쉽게말해 separator는 문자열을 잘라줄 구분자, limit는 최대 분할 갯수입니다.

separator에 값이 입력되지 않는다면 문자열 전체를 배열에 담아 리턴하게 됩니다.

 

 

🤔 예제를 통해 살펴보기

split을 사용할 때 파라미터의 값에 따라 결과가 다르게 나오므로 

  • 파라미터를 입력하지 않은 경우
  • 단어별로 자를 경우
  • 글자별로 자를 경우
  • 특정 구분자로 자를 경우
  • limit 값을 지정한 경우

이렇게 다섯가지의 경우로 나눠서 살펴보겠습니다.

 

1 ) 파라미터를 입력하지 않은 경우

const str = 'red blue black';

const arr = str.split();

console.log(arr); // red blue black
console.log(arr.length); // 1

위 예제처럼 파라미터를 입력하지 않을 경우에는 문자열 전체를 배열로 리턴합니다. 

문자열 전체가 배열에 담겼으므로 배열의 길이는 1 입니다.

 

2) 단어별로 자를 경우

단어별로 자르고 싶을 경우에는 separator(첫번째 파라미터)를 " " 로 설정합니다.

const str = 'red blue black';

const splitArr = str.split(" ");

console.log(splitArr); // ['red', 'blue', 'black']

문자열 'red blue black' 에서 단어별로 자르고 싶다면 " " 를 기준으로 split해줍니다.

문자열을 공백을 기준으로 잘라서 각각의 조각들을 배열에 저장하여 리턴합니다.

안에 공백(space)를 반드시 입력해야 합니다. 

 

3) 글자별로 자를 경우

글자별로 자르고 싶을 경우에는 separator(첫번째 파라미터)를 "" 로 설정합니다.

const str = 'red blue black';

const splitArr = str.split("");

console.log(splitArr); // ['r', 'e', 'd', ' ', 'b', 'l', 'u', 'e', ' ', 'b', 'l', 'a', 'c', 'k']

위 예시와 다르게 첫번째 파라미터 ""안에 공백을 넣지 않는다면

문자열을 각각의 문자별로 잘라서 한 글자씩 배열에 저장하여 리턴하게 됩니다.

이때 공백도 하나의 문자이기 때문에 공백이 포함되어있습니다.

 

4) 특정 구분자로 자를 경우

특정 구분자로 자르고 싶을 경우에는 separator(첫번째 파라미터)를 "특정문자"로 설정합니다.

const str = "red/blue/black";

const splitArr = str.split("/");

console.log(splitArr);  // ['red', 'blue', 'black']

특정 구분자로 자를 경우 첫번째 파라미터 separator에 자신이 원하는 문자열을 지정합니다.

위 예시에서는 ' / ' 를 기준으로 하여, ' / '를 기준으로 잘라진 조각들을 배열에 담아 리턴하였습니다.

 

 

5) limit 값을 지정한 경우

마지막으로 두번째 파라미터인 limit의 값을 지정해보겠습니다.

const str = "red/blue/black";

const splitArr = str.split("/", 2);

console.log(splitArr);  // ['red', 'blue']
console.log(splitArr[2]); // undefined

위 예제에서는 limit의 값을 2로 지정했습니다.

' / '를 기준으로 잘랐지만 배열의 길이가 2로 지정됐기 때문에 black은 배열에 포함되어있지 않습니다.

따라서 arr의 3번째 요소를 콘솔에 찍으면 undefined가 출력됩니다.

 

 

 


문자열을 원하는 문자로 자르고 그 문자를 내가 원하는 문자(혹은 숫자)로 바꾸고 싶다면

split을 사용해 자른 후 join을 사용해 연결할 수 있습니다.

다음 글에서는 javascript에서 join을 사용하는 것에 대해 알아보겠습니다 !

 

 

참고글  https://hianna.tistory.com/377

반응형
Comments