substr(), substring(), slice() 차이

1. substring() vs. substr() 

각 메소드의 두번째 인자가 의미하는 바가 다르다. 

- substring의 두번째 인자: 마지막 인덱스(포함하지 않음) 

- substr의 두번째 인자: 추출한 문자의 길이 

 

const word = 'grapefruit'

word.substring(4,7) // 'efr'
word.substr(4,7) // 'efruit'

 

2. substring() vs. slice()

substring()과 slice()의 사용법은 기본적으로 동일하다. 하지만 다음의 두 가지 경우에 차이가 있다.

 

1) startIndex > endIndex 일 때

substring()은 첫번째 인자(startIndex)가 두번째 인자(endIndex)보다 크면 swap을 하지만, slice()는 swap을 하지 않는다.

const word = 'grapefruit'

word.substring(5,1) // 'rape'
word.slice(5,1) // ''

즉, substring()은 첫번째 인자와 두번째 인자의 순서를 바꾸어도 늘 같은 결과가 나온다. 

word.substring(5,10) // 'fruit'
word.substring(10,5) // 'fruit'

 

2) 인자가 음수일 때 

- substring()은 인자가 음수이거나 NaN일 때, 이를 둘 다 0으로 처리한다. 

word.substring(-5, 2) // 'gr'
word.substring(-3, -4) // ''

 

- slice()도 NaN이 인자로 들어오면 0으로 처리한다. 하지만 음수의 경우 문자열 끝에서부터 거꾸로 인덱스를 센다.

word.slice(-5, 2) // ''
word.slice(-5, -2) // 'fru'

word.slice(0, -2) // 'grapefru'
word.substring(0, -2) // ''

 

 

기본적으로 세 가지 메소드가 비슷하게 쓰이고 실제로 공통점도 많지만, 위의 차이점이 있기 때문에 때로 다르게 작동한다. 이러한 차이를 잘 인지하고 문자열 추출이 필요할 때 올바른 메소드를 쓸 수 있어야겠다. 

 

const word = 'grapefruit'

// 세 가지 메소드 전부 두번째 인자가 없으면 문자열 끝까지 추출한다. 
word.substr(5) // 'fruit'
word.substring(5) // 'fruit'
word.slice(5) // 'fruit'

// 첫번째 인자만 있는데, 음수가 들어올 경우: substring만 음수를 0으로 취급한다.
word.substr(-3) // 'uit'
word.substring(-3)  // 'grapefruit'
word.slice(-3) // 'uit'

 

 

📚 참고자료

String.prototype.substring() - JavaScript | MDN