[JavaScript] 자바스크립트 문자열 자르기 (split, substring, slice)

자바스크립트로 코딩을 하다보면 문자열 자료형을 다루게 되는 경우가 매우 많습니다.

따라서 본 포스팅에서는 자바스크립트 문자열 자르기에 대해 다루어볼까 합니다.

자바스크립트 문자열 자르기는 크게 split(), substring(), slice() 함수 등을 사용하여 할 수 있습니다. 예시들과 함께 알아보겠습니다.

split(): 주어진 구분자(seperator)로 문자열 자르기

split() 메서드는 주어진 구분자로 문자열을 구분해서 잘라줍니다. 잘라진 문자열은 배열에 담겨 반환되고 문자열의 개수도 지정해 줄 수 있습니다.

예시로 아래와 같은 문자열을 자른다고 가정해보겠습니다.

const splitString = "this, is, an, example";

splitString.split(',');
출력값: ['this', 'is', 'an', 'example']

이렇게 문자열.split(‘구분자’)를 호출하면 구분자를 통해 문자열을 잘라서 배열 요소로 넣어준 후 반환합니다. 예시에선 반점을 구분자로 넣어주었기 때문에 반점이 있을때마다 문자열을 잘라준 모습입니다.

splitString.split(',', 0);
splitString.split(',', 1);
splitString.split(',', 2);
splitString.split(',', 3);
출력값: 
[]
['this']
['this', 'is']
['this', 'is', 'an']

추가로, 배열의 최대크기를 지정하여 반환되는 잘라진 문자열 배열의 크기를 정할 수 있습니다. 0 인 경우 빈 배열이 반환되고 1 인경우 ‘this’ 문자열 하나만 담긴 배열이 반환되는 것처럼 말이죠.

substring(): 문자열 특정 부분 자르기

색인(index)을 넣어서 원하는 시작위치부터 끝위치(미포함)까지의 문자열 일부분을 잘라서 반환하는 메서드입니다. (색인 또는 위치는 0부터 시작합니다.)

예시로,

const subString = "this is an example";
// 위치표기          012345678901234567

subString.substring(8);
출력값: 'an example'

이렇게 인자로 하나의 색인을 넣어주는 경우 시작위치로 인식하기 때문에 n번째 위치의 캐릭터부터 끝까지 문자열을 잘라서 반환해줍니다. 즉, 8번째인 ‘a’부터 끝까지 문자열을 잘라서 반환해주는 것이지요.

subString.substring(8,12);
출력값: 'an e'

만약 두개의 색인을 인자로 넣어주는 경우 첫번째 인자는 시작 두번째는 끝나는 위치(미포함)로 문자열을 잘라서 반환해줍니다. 즉, 8번째인 ‘a’ 부터 11번째인 ‘e’까지 잘라서 반환해줍니다.

slice(): 문자열 특정 부분 자르기

slice() 메서드는 substring() 메서드와 동작방식이 매우 유사합니다.

마찬가지로,

const sliceString = "this is an example";
// 위치표기            012345678901234567

sliceString.slice(7);
출력값: ' an example'

하나의 색인을 인자로 넣어줄 경우 해당 색인을 시작으로 끝까지 문자열을 잘라서 반환해줍니다.

sliceString.substring(7,10);
출력값: ' an'

같은 방식으로 두개의 색인을 인자로 넣어주는 경우 첫번째 색인은 시작위치 두번째 색인은 끝나는 위치(미포함)로 문자열을 잘라서 반환해줍니다.

substring() vs slice() 차이점

여기까지 읽으셨다면, substring() 메서드와 slice() 메서드의 차이점에 대해 궁금하실 수 있습니다. 위에서의 예시들로만 보면 완전히 동일한 작동방식처럼 보이기 때문이죠.

또 예시를 통해 알아보겠습니다.

const string = "substring과 slice의 차이점";

시작색인이 끝색인보다 큰 경우

string.slice(1,0);
string.substring(1,0); 
결과값: 
slice(): ''
substring(): 's'

slice()는 이렇게 시작색인이 끝색인보다 더 큰 경우라면 빈 문자열 ”을 반환합니다.

subtring()은 인자의 위치와 상관없이 더 큰 숫자를 끝색인 작은 숫자를 시작색인으로 인식하여 slice(0,1)을 호출한 것처럼 반환합니다.

색인이 음수인 경우

string.slice(-3,20);
string.substring(-3,20); 
결과값: 
slice(): '차이'
substring(): 'substring과 slice의 차이'

slice()는 음수 색인이 인자로 들어왔을때 뒤에서부터 계산합니다. 즉 -3 은 뒤에서부터 3번째인 18인 것입니다. (string의 길이: 21) 즉, slice(18,20)의 결과값과 동일합니다.

substring()은 음수 색인이 인자로 들어오면 그냥 0으로 계산합니다. 즉, substring(0,20)과 같은 결과값을 반환합니다.

답글 남기기