[javascript] 헷갈리기 쉬운 substring(), substr() 메서드 사용법 비교

오늘은 자바스크립트에서 문자열을 자를 때 사용하는 메서드인 substring()과 substr()에 대해서 살펴보도록 하겠습니다. 이름이 비슷해서 헷갈리기 쉬운 메서드들입니다.

 

substring(), substr() 메서드 사용법 비교

1. substring(start, end): 시작 인덱스와 끝 인덱스 사용. start와 end 사이의 문자열을 반환. end는 포함하지 않음.

2. substr(start, length): 시작 인덱스와 길이 사용. start 인덱스부터 length 만큼의 문자열을 반환.

 

바로 예시로 살펴보겠습니다.

 

const txt = "안녕하세요.";
console.log(txt.substring(1, 4));
console.log(txt.substr(1, 4));

 

 

결과를 살펴보면 substring(1, 4)를 사용한 경우 1, 2, 3 인덱스 결과인 "녕하세"가 잘렸고, substr(1, 4)를 사용한 경우에는 인덱스 1부터 4개 글자인 "녕하세요"가 잘렸습니다.