프로그래머스에서 알고리즘을 풀던 도중에 substr()을 알게 되었다. substr()과 substring()은 굉장히 비슷하여 문자열 메소드를 사용하던 도중에도 헷갈렸다. 이를 정리하기 위해서 이 글을 작성하게 되었다.

---

substr() vs substring()

👉 substr()과 substring() 둘 다 모두 string(문자열)일 때 문자열의 원하는 부분을 가지고 올 수 있다.

👉 여기서 다른 점은 substr()은 원하는 index 시작 위치에서 그 위치로 부터 length만큼 가져올 수 있다는 것이며, substring()은 원하는 index 시작 위치에서 끝나는 index의 위치전까지 가져올 수 있다.

👉 둘 다 비슷한 기능을 하지만 방법이 다른 것이다

---

string.substr()

Syntax

string.substr(start)
string.substr(start, length)

Examples

const x = "012345"

x.substr(3, 1) 	// Output: 3
x.substr(3)    	// Output: 345
x.substr(-3, 2) // Output: 34
x.substr(-3)    // Output: 345

x.substr(3,1) - 3번 Index에서 시작하여 길이 1만큼의 값을 return한다. 결과값은 3이다.

x.substr(3) - Index 3번에서 시작하여 끝까지의 값을 return한다. 결과값은 345이다.

x.substr(-3, 2) - start는 인수로 음수(negative)값도 받는다. 음수인 경우에는 Index가 끝에서 시작을 한다. -1인 경우 끝에서 첫 번째이다. 여기선 -3을 인수로 받는다.끝에서 3번째인 3부터 시작하여 길이 3을 포함한 2만큼 return한다. 결과값은 34이다.

x.substr(-3) - start가 -3이므로 끝에서 3번째부터 시작한다. length의 인수를 받지 않으므로 문자열의 끝까지의 값을 return한다. 결과값은 345이다.

string.substring()

Syntax

string.substring(indexstart)
string.substring(indexstart, indexend)

Examples

const x = "012345"

x.substring(2, 5) 	// Output: 234
x.substring(2)    	// Output: 2345
x.substring(-3, 2) // Output: 01
x.substring(-3)    // Output: 012345

x.substring(2, 5) - Index 2번에서 시작하여 5에서 1을 차감한 4번 Index까지의 값을 return한다. 결과값은 234이다.

x.substring(2) - Index 2번부터 끝까지의 값을 return한다. 결과값은2345이다.

x.substring(-3, 2) - substring에서도 substr과 같이 음수값을 인수로 받는지 궁금할 수 있을 것이다. substr와는 다르게 substring에서는 음수값을 0으로 생각하면 된다. 그러므로 여기서 결과값은 시작부터 2에서 1을 참가한 1번 Index까지의 값을 return한다. 결과값은 01이다

x.substring(-3) - 여기서도 -3을 0으로 생각하면 0부터 Index 끝까지의 값을 return하게 된다. 결과값은 012345이다.

Reference

MDN - String.prototype.substr()
MDN - String.prototype.substring()