자바스크립트에서 부분 문자열을 사용할때 substr(), substring() 을 사용하곤 합니다.
이름도 비슷하고, 문자열의 일부를 잘라내는 기능도 비슷하지만, 두 함수는 사용 방법과 동작 방식에서 미묘한 차이가 있습니다.
substr() 함수
substr()함수는, 문자열의 일부를 일정 길이만큼 추출하고 싶을 때 사용합니다.
첫 번째 인자로 시작 인덱스, 두 번째 인자로 잘라낼 길이를 넘기게 됩니다.
'string'.substr(startIndex, length);
//example
'1234567'.substr(2,3); //'345'substr() 함수를 호출할 때, 두 번쨰 인자를 생략하게 되면, 첫 번째 인자인 시작 인덱스로부터 문자열 끝까지 추출하게 됩니다.
'1234567'.substr(2); // '34567'아무 인자도 넘기지 않으면, 원본 문자열이 그대로 얻어집니다.
'1234567'.substr(); // '1234567'첫 번째 인자에 음수 인덱스를 넘기게 되면, -1은 끝에서 첫 번째 문자, -2는 끝에서 두 번째 문자, -n은 끝에서 n 번째 문자입니다.
'1234567'.substr(-2,3); //'67'substring() 함수
substring()함수는 문자열을 시작과, 종료 인덱스를 기준으로 자르고 싶을 때 사용하는 함수입니다.
substr()과 달리, 두 번째 인자를 문자열 길이가 아닌 종료 인덱스로 받습니다.
'string'.substring(startIndex, endIndex);
//exmaple
'string'.substring(1,4); // 'tri'substring()도 substr()과 마찬가지로, 두 번째 인자를 생략하게 되면, 첫 번째 인자로 넘긴 인덱스로부터, 문자열의 끝 까지 추출하게 됩니다.
'string'.substring(1); // 'tring'마찬가지로, 아무 인자도 넘기지 않으면 문자열이 그대로 얻어집니다.
'string'.substring(); //'string'하지만, substr()과 달리, 첫 번째 인자로 음수 인덱스를 넘기면, 0을 넘긴 것처럼 동작합니다.
'string'.substring(-1,4); //'stri'참고.
MDN을 참고하면, substr()함수는 deprecated 폐기된 함수입니다. 해당 방법을 사용하셔서, substr()을 substring()으로 변환하시면 좋을 것 같습니다.
"string".substr(startIndex, length);
"string".substring(startIndex, startIndex + length);slice() 함수
substr(), substring()과 비슷한 목적으로 사용되는 함수입니다. 배열 뿐 아니라, 문자열에도 사용할 수 있는 slice()함수는 substring()함수와 마찬가지로 파라미터의 사용 방식이 같습니다.
'string'.slice(startIndex, endIndex); 그렇다면 slice()함수와, substring()함수의 차이는 무엇일까요??
1. start > end 일 경우의 처리 방식의 차이
파라미터로 전달되는 값이 start > end 일 경우에
substring()
- start값과 end값을 바꾸어서 처리함
slice()
- 그냥 비어있는 string, 즉 “”을 리턴함.
2. start 또는 end 값이 음수일 경우.
slice()
- string의 가장 뒤에서 음수의 절대값 만큼 내려온 index로 취급합니다.
let sting = '안녕하세요?'
string.slice(-2,6); // '요?'
string.slice(0,-2); // '안녕하세'
string.substring(-2,6); // '안녕하세요?'
string.substring(0,-2); // ''