[ JavaScript ] 문자열 자르기: substr() 🆚 substring()

 

https://www.daleseo.com/js-substr-substring/

자바스크립트 문자열 자르기: substr()과 substring() 함수

맨날 둘이 헷갈리는 나.. 제대로 익혀보고자 위 블로그를 보고 내가 계속 보고 참고할 내용들을 옮겨보았다. 

 

substr() 함수

먼저 살펴볼 substr() 함수는 문자열의 일부를 일정 길이만큼 추출하고 싶을 때 사용합니다.

다음과 같은 형태로 첫 번째 인자로 시작 인덱스를 두 번째 인자로 잘라낼 길이를 넘기면 됩니다.

"문자열".substr(startIndex, length);
"ABCDEFG".substr(2, 3); // "CDE"
"ABCDEFG".substr(2); // "CDEFG"
"ABCDEFG".substr(); // "ABCDEFG"

// -1이 끝에서 첫 번째 문자이고, -2가 끝에서 두 번째 문자가, -n이 끝에서 n 번째 문자가 됩니다.
"ABCDEFG".substr(-5, 3); //  "CDE"

 

 

substring() 함수

다음으로 살펴볼 substring() 함수는 문자열을 시작과 종료 인덱스를 기준으로 자르고 싶을 때 사용하는데요. 두 번째 인자로 문자열 길이 대신에 종료 인덱스를 받는다는 점에서 위에서 살펴본 substr()와 큰 차이가 있습니다.

"문자열".substring(startIndex, endIndex);
"ABCDEFG".substring(2, 5); // "CDE"
"ABCDEFG".substring(2); // "CDEFG"
"ABCDEFG".substring(); // "ABCDEFG"

// 음수 인덱스를 넘기면 0을 넘긴 것처럼 작동
"ABCDEFG".substring(-5, 3); //  "ABC"

 

 

substr() vs. substring()

시작 인덱스와 길이를 기준으로 자르는 substr()와 시작과 종료 인덱스를 기준으로 자르는 substring()는 비슷한 목적을 가지고 있지만 지금까지 살펴본 것처럼 사용 방법과 동작 방식에서 차이가 있어서 주의가 필요합니다.

 

substr() 함수는 자바스크립트에서 deprecated, 즉 폐기된 함수입니다. MDN 관련 레퍼런스를 보시면 이제 쓰지 말라고 빨간색 글씨로 경고하고 있습니다.

 

"문자열".substr(startIndex, length);
"문자열".substring(startIndex, startIndex + length);

 

이러한 요령을 사용하셔서 가급적 substr()를 사용한 코드를 substring()을 쓰도록 리펙토링(refactoring)하시기를 추천드립니다. Deprecated된 함수를 사용해서 좋을 일은 없으니까요.

 

보너스: slice() 함수

substr()와 substring() 만큼 햇갈리는 것은 아니지만 유사한 목적으로 사용되는 함수가 하나 더 있어서 짚고 넘어가려고 합니다. 바로 배열 뿐만 아니라 문자열을 상대로도 사용할 수 있는 slice() 함수인데요. 이 함수는 첫 번째 인자로 음수 인덱스를 지원한다는 점에서는 substr()과 유사하지만, 두 번째 인자로 종료 인덱스를 받는다는 점에서는 substring()과 유사합니다.

"문자열".slice(startIndex, endIndex);

 

"ABCDEFG".substr(-5, 3); //  "CDE"
"ABCDEFG".substring(-5, 3); //  "ABC"
"ABCDEFG".slice(-5, 3); // "C"