[javascript] .substr / .substring / .slice의 차이

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 !

 

회사에서 함수를 만들며 string인 변수를 잘라서 리턴해야 하는 경우가 있었다.

가이드로 제공됐던 함수가 .substr()을 쓰고 있었으나 mdn에 따르면 .slice()나 .substring()을 사용하라고 권장해서 이번 기회에 이 함수들을 정리해보게 되었다.

3가지 함수 모두 문자열을 추출해주는 기능이기는 하나 조금씩 다른 부분이 있다.

 

1. .substr(start, length)

substr은 문자열에서 시작 위치와 추출할 길이를 지정한다.

특징은 start가 음수인 경우 문자열의 끝에서 부터 시작 위치를 계산한다.

length는 선택 사항이며 지정하지 않는 경우 문자열의 끝까지 추출한다.

 

코드 예시 :

let str = "Hello, world!";

//일반적인 경우
let result = str.substr(7, 5);  // "world"

//인덱스가 음수인 경우 => 끝에서부터 시작
let result = str.substr(-6, 5);  // "world"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

String.prototype.substr() - JavaScript | MDN

 

2. substring(start, end)

substring은 문자열에서 시작 인덱스와 끝 인덱스를 지정하여 문자열을 추출하고 끝 인덱스는 포함하지 않는다.

특징은 start와 end가 음수인 경우 자동으로 0으로 처리되고,

start > end인 경우 두 값을 교환해서 추출한다.

end를 생략하면 문자열 끝까지 추출한다.

 

코드 예시 :

//일반적인 경우
let str = "Hello, world!";
let result = str.substring(7, 12);  // "world"

//start > end인 경우 => 자동 교환
let result = str.substring(12, 7);  // "world"

//인덱스가 음수인 경우 => 0으로 처리
let result = str.substring(-5, -1);  // ""

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

String.prototype.substring() - JavaScript | MDN

 

3. slice(start, end)

slice의 동작방식은 substring과 동일하다.

substring과 다른 특징은 start와 end가 음수인 경우 문자열의 끝에서부터 계산하고,

start > end인 경우 빈 문자열을 반환한다.

또한, slice만 유일하게 배열에서도 사용 가능하다.

 

코드 예시 :

//start > end인 경우 => 빈 문자열 반환
let result = str.slice(5, 2);  // ""

//인덱스가 음수인 경우 => 끝에서부터 시작
let result = str.slice(-5, -1);  // "worl"

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice

String.prototype.slice() - JavaScript | MDN

 

 

---

정리

	substr(start, length)	substring(start, end)	slice(start, end)
음수 인덱스	끝에서 부터 계산	0으로 처리	끝에서부터 계산
start > end		자동으로 교환	빈 문자열 반환
결과가 빈 문자열이 되는 경우	leng < 0	start == end	start > end
배열에서도 사용	X	X	O