자바스크립트 문자열 자르기 slice와 substring 차이점

2023.08.09

slice 함수는 배열을 자를때 많이 사용하지만 문자열을 자를 때도 사용합니다.

그리고 문자열을 자르기 위해 substring 함수를 많이 사용합니다.

slice 함수와 substring 함수로 문자열을 자를때 차이점을 보도록 하겠습니다. 

 

slice와 substring 차이

substring (시작위치, 종료위치)

slice (시작위치, 종료위치)

 

예제1

var str = "ABCDEFGHIJK";

var subRs = str.substring(0,2);
var sliceRs = str.slice(0,2);

console.log("substring : " + subRs);
console.log("slice : " + sliceRs);

 

결과

substring : AB
slice : AB

 

두 함수 모두 0번째부터 2번째 문자인 AB를 잘랐습니다.

이번에는 마이너스 위치를 지정해서 확인해보겠습니다.

 

예제2

var str = "ABCDEFGHIJK";

var subRs1 = str.substring(3,-4);
var sliceRs1 = str.slice(3,-4);
var subRs2 = str.substring(-3,4);
var sliceRs2 = str.slice(-3,4);


console.log("substring1 : " + subRs1);
console.log("slice1 : " + sliceRs1);
console.log("substring2 : " + subRs2);
console.log("slice2 : " + sliceRs2);

 

결과

substring1 : ABC
slice1 : DEFG
substring2 : ABCD
slice2 :

 

두 함수의 시작 위치와 종료 위치에 마이너스 값을 설정했습니다.

결과값은 모두 다릅니다.

먼저 substring 함수부터 확인하겠습니다.

substring 함수의 경우에는 마이너스 값은 0으로 인식됩니다.

str.substring(3,-4)는 str.substring(3,0)으로 변환됩니다.

그리고 시작 위치가 종료 위치보다 크기 때문에 3과 0의 값이 바뀌게 됩니다.

즉, str.substring(3,-4)는 str.substring(0,3)으로 바뀌게 됩니다.

str.substring(-3,4)는 마이너스 값인 -3이 0으로 바뀝니다.

즉, str.substring(-3,4)는 str.substring(0,4)으로 바뀌게 됩니다.

이번에는 slice 함수를 보겠습니다.

slice는 마이너스 값을 입력해서도 사용 가능합니다.

마이너스 값을 입력한 경우에는 뒤에서부터 이동하게 됩니다.

str.slice(3,-4)의 경우에는 시작 위치는 앞에서부터 3번째 문자부터이고 종료 위치는 뒤에서부터 4번째 문자까지가 됩니다.

단 str.slice(-3,4)처럼 시작 위치에 마이너스 값을 입력한 경우에는 뒤에서부터 시작하기 때문에 종료 값도 마이너스 값을 지정해야 합니다.

그렇지 않으면 예제처럼 공백이 반환됩니다.

뒤에서부터 원하는 자리수 만큼 자르는 방법은 아래를 참조해주세요.

자바스크립트 문자열 뒤에서부터 자르기 slice 링크링크

 

정리

자바스크립트에서 문자열을 자르는 방법으로 많이 사용하는 slice와 substring 함수를 살펴보았습니다.

두 함수에 마이너스 값을 입력했을 때는 다른 결과값을 반환하는 것을 확인했습니다.

지정한 값에 따라 결과값에 차이가 있기 때문에 주의해서 사용해야 합니다.

댓글