[JS] String.slice() 와 String.substring() 비교

String.prototype.slice()
str.slice(start[, end])

String.prototype.substring()
str.substring(start[, end])

공통점

• 둘 다 2개의 인자(start, end)를 받지만, 두번째(end)는 optional
• start 인덱스부터 end 인덱스 "직전"까지 추출
• end 인덱스가 없다면 마지막까지
• start = end 일 경우, 빈 문자열 반환

차이점

• 음수인덱스일 경우, slice()는 역방향으로 카운트 / substring() 은 0으로 치환됨
• start 가 end 보다 큰 경우, slice()는 빈 문자열 반환 / substring() 은 마치 두 개의 인자를 바꾼 듯 작동
• 인자가 strLength 보다 큰 경우, substring()은 strLength 로 치환해서 처리 / slice()는 start 가 strLength 큰 경우에는 빈 문자열 반환, end 가 strLength 큰 경우에는 strLength 로 치환

 

---

 

start 인덱스부터, end "직전" 까지 세는 게 헷갈린다면
아래와 같이 글자 사이에 인덱스가 있다고 생각하고, 그 범위 안에 들어가는 것만 추출하는 걸로 셀 수 있다.
나는 이렇게 세는게 훨씬 직관적이고 빠르다. 

몇가지 예제로 비교해보았다.

동일한 입력값, 동일한 결과값이 나오는 경우

// start, end 모두 없는 경우
"CARROT".slice()        // result : "CARROT"
"CARROT".substring()    // result : "CARROT"

// start index 양수 하나인 경우
"CARROT".slice(3)        // result : "ROT"
"CARROT".substring(3)    // result : "ROT"

// start === end 인 경우
"CARROT".slice(3, 3)        // result : ""
"CARROT".substring(3, 3)    // result : ""

동일한 입력값, 다른 결과값이 나오는 경우

// 음수 인덱스
"CARROT".slice(-2)        // result : "OT" -> 역방향 인덱스부터 시작
"CARROT".substring(-2)    // result : "CARROT" -> 음수인 경우, 0으로 치환

// start > end
"CARROT".slice(4,2)        // result : ""
"CARROT".substring(4,2)    // result : "RR" -> 마치 두 개의 인자를 바꾼 듯 작동

// 음수 인덱스2
"CARROT".slice(2, -2)        // result : "RR" -> start 는 정방향, end 는 역방향
"CARROT".substring(2, -2)    // result : "CA" -> 음수가 0으로 치환, start>end 이므로 swap

// 인자가 strLength 보다 큰 경우
"CARROT".slice(10, 2)        // result : ""
"CARROT".substring(10, 2)    // result : "RROT" -> swap 된 후, 10이 strLength로 치환

 

참고 :

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

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