substring(), substr() 비교

코드를 짜다보면 계속 헷갈리는 두 메소드

두 메소드 다 문자열을 자르는 거고, 생긴 것도 비슷해서 계속 헷갈린다.

 

1.String.prototype.substring()

substring()은 시작인덱스부터 끝인덱스 전까지의 문자열을 리턴해준다.

문자열.substring(시작인덱스, 끝인덱스)의 형식으로 작성하고 끝 인덱스는 생략이 가능하다

var str = "안녕하세요";

console.log(str.substring(1,4)); //"녕하세" 
// 1번 인덱스인 "녕"부터 4번 인덱스 "요" 전인 "세"까지의 문자열을 리턴해준다.

console.log(str.substring(1)); //"녕하세요" 
// 끝 인덱스를 생략하면 문자열의 시작 인덱스부터 문자열의 마지막 인덱스까지 문자열을 리턴해준다.

만약에 인덱스를 입력하지 않고 str.substring()만 쓴다면 문자열을 그대로 리턴해준다.

var str = "안녕하세요";

console.log(str.substring()); //"안녕하세요"

 

2.String.prototype.substr()

substr() 도 substring()처럼 문자열을 잘라 리턴해주지만 인덱스가 아닌 길이를 받는 메소드다.

문자열.substr(시작인덱스, 길이)의 형식으로 작성하고 끝 인덱스는 생략이 가능하다.

var str = "안녕하세요";

console.log(str.substr(1,3)); //"녕하세"
//1번 인덱스인 "녕"부터 길이 3만큼 잘라준다.

console.log(str.substr(1)); //"녕하세요"
//길이를 생략한 경우 인덱스부터 끝까지 문자열을 리턴해준다.

 

주의 1.

var str = "안녕하세요";

console.log(str.substring(1,3)); //"녕하"
console.log(str.substr(1,3)); //"녕하세"

console.log(str) // "안녕하세요"

substring()과 substr() 모두 기존 변수의 값을 바꾸는 것이 아닌 특정 문자열을 리턴해주는 것이다.

잘라낸 만큼의 문자열은 또다른 변수에 저장을 해야한다.

 

주의 2.

MDN에서 substr 사용을 지양하고 있으니 이제 substring을 사용하기!!