220628 TIL

220628 TIL

블로그가 매번 지연되고 있다 ㅠ. 게을렀던 것인가, 그래도 이틀, 삼일에 한개는 올리겠지라는 심정으로 작성하고 있지만 조금씩 조금씩 밀리고 있당 ㅠ.

String.prototype.substring()

지난 TIL에서 잠깐 사용하고 메모해놨던 내용이 있었다.(220607 TIL)
substring()내용 중 다른 메소드와 몇 가지 차이점이 있어서 정리하려고 한다.

구문

str.substring(indexStart[, indexEnd])

• indexStart
  시작 인덱스

• indexEnd
  옵션, 마지막 인덱스

특징

• indexStart 와 indexEnd가 같을 경우 빈 문자열을 반환 한다고 한다.
• indexStart 가 indexEnd보다 클 경우, 두 개의 인자를 바꾼 듯 작동한다고 한다.
• 0보다 작은 인자 값을 가지는 경우 0으로 처리하고, str.length보다 큰 인자 값을 가지는 경우는 str.length로 처리한다고 ㅎ나다.
• NaN 값은 0으로 처리한다고 한다.

예시

const s = "ghost"

console.log(s.substring(2)) //'ost'

console.log(s.substring(2,4)) //'os'
console.log(s.substring(4,2)) //'os'

console.log(s.substring(0,5)) //'ghost'
console.log(s.substring(0,10)) //'ghost'

length property와 사용

length property 사용 시 문자의 끝부터 부분적으로 추출할 수 있다고 한다. 오히려 시작점을 알 필요없기 때문에 필요한 부분만 추출 할 수 있어 편리 할 수 있다.

const s = "ghost"

console.log(s.substring(s.length - 1)) //'t'
console.log(s.substring(s.length - 3)) //'ost'

substring() vs substr()

두 메소드의 약간의 차이점이 있다고 한다.

• substring()
  시작 인덱스와 끝 인덱스를 인자로 받고 있다.

• substr()
  시작 인덱스와 문자의 개수를 인자로 받고 있다.

const s = "ghost"

console.log(s.substring(1,4)) //'hos'
console.log(s.substr(1,3)) //'hos'

MDN을 참고하면 substr()가 명세에서 제거 될 수 있는 method라고 하니 사용에 주의 바란다.

substring() vs slice()

두 메소드 사이는 거의 똑같다고 볼 수 있으나, 음수 인자를 받는 것에 대해서는 차이가 있다고 한다.
앞에서 얘기했듯이 substring() 인자 중 indexStart와 indexEnd가 뒤바뀌어도; indexStart 숫자가 indexEnd보다 커도 바꾸어서 동작한다. 하지만 slice()는 빈 문자열을 반환 한다고 한다.

const s = "ghost"

console.log(s.substring(1,4)) //'hos'
console.log(s.slice(1,4)) //'hos'

console.log(s.substring(4,1)) //'hos'
console.log(s.slice(4,1)) //''

substring()의 인자가 음수이거나 NaN일 경우, substring에서는 인자를 0으로 다룬다고 한다.

const s = "ghost"

console.log(s.substring(-5, 1)) //'g'
console.log(s.substring(-5, -1)) //''

slice() 경우는 인자가 NaN인 경우는 0으로 다루고, 음수인 경우에는 문자열의 맨 뒤부터 계산한다고 한다.

const s = "ghost"

console.log(s.slice(-4, -1)) //'hos'
console.log(s.slice(-4, 1)) //''

마치면서

무심코 지나갈 수 있는 내용었다. 실전에서도 사용하기 바란다.

참조

[String.prototype.substr(), MDN, 2022년07월05일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substr
[String.prototype.substring(), MDN, 2022년07월05일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring