[JavaScript] substr() vs. substring() vs. slice()

substr()

• substr() 메서드는 더이상 사용하지 않는 것이 권장된다.
• 아직 몇몇 브라우저에서 substr()을 지원하지만, 이는 웹표준이 아니다.

substring()

substring() 메서드는 문자열의 시작과 끝 index 사이의 부분 문자열을 반환한다.

구문

substring(indexStart)
substring(indexStart, indexEnd)

매개변수

• indexStart
  • 반환될 문자열의 첫번째 글자의 index
• indexEnd (선택사항)
  • 반환될 문자열의 마지막 글자 다음의 index
  • 반환될 문자열에서 처음으로 포함되지 않을 글자의 index
  • 생략될 경우 문자열의 마지막 글자까지 반환한다.
  • indexStart와 같으면, 빈 문자열을 반환한다.
  • indexStart보다 크면, indexEnd와 indexStart가 바뀐 것처럼 동작한다.
• 어떤 매개변수든 0보다 작으면 0으로 처리되고, stringName.length보다 크면 stringName.length로 처리된다.
• NaN은 0으로 처리된다.

반환값

• 주어진 문자열의 특정 부분을 포함한 새 문자열을 반환한다.

예시

let anyString = 'JustDoIt'

// Displays 'J'
console.log(anyString.substring(0, 1))
console.log(anyString.substring(1, 0))

// Displays 'JustDo'
console.log(anyString.substring(0, 6))

// Displays 'DoIt'
console.log(anyString.substring(4))
console.log(anyString.substring(4, 8))
console.log(anyString.substring(8, 4))

// Displays 'JustDoIt'
console.log(anyString.substring(0, 8))
console.log(anyString.substring(0, 10))

slice()

slice() 메서드는 문자열의 일부를 추출하여 새로운 문자열로 반환한다. 기존 문자열을 변형하지 않는다.

구문

slice(beginIndex)
slice(beginIndex, endIndex)

매개변수

• beginIndex
  • 0부터 시작하는 추출 시작 index
  • 음수이면 str.length + beginIndex부터 추출을 시작한다.
  • 생략되었거나, 할당되지 않았거나, Number()를 사용해도 숫자로 변환될 수 없을 때 문자열의 첫 글자부터 추출한다.
  • str.length보다 크면 빈 문자열을 반환한다.
• endIndex (선택사항)
  • 반환될 문자열에서 처음으로 제외될 글자의 index
  • 생략되었거나, 할당되지 않았거나, Number()를 사용해도 숫자로 변환될 수 없을 때 문자열의 마지막 글자까지 반환한다.
  • str.length보다 크면, 문자열 마지막까지 반환한다.
  • 음수이면, str.length + endIndex로 취급한다.
  • beginIndex보다 작으면, 빈 문자열을 반환한다.

반환값

• 주어진 문자열의 특정 부분을 포함한 새 문자열을 반환한다.

예시

let str1 = 'The morning is upon us.', // the length of str1 is 23.
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2)  // OUTPUT: he morn
console.log(str3)  // OUTPUT: morning is upon u
console.log(str4)  // OUTPUT: is upon us.
console.log(str5)  // OUTPUT: ""

substring()과 slice()의 차이

• substring()은 indexEnd가 indexStart보다 크면, indexEnd와 indexStart가 바뀐 것처럼 동작한다.

let text = 'Mozilla'
console.log(text.substring(5, 2))  // => "zil"
console.log(text.slice(5, 2))      // => ""

• substring()의 전달인자가 음수이거나 NaN이면, 0으로 취급한다.

console.log(text.substring(-5, 2))  // => "Mo"
console.log(text.substring(-5, -2)) // => ""

• slice()의 전달인자가 NaN이면, 0으로 취급하지만, 음수이면 문자열의 마지막 글자부터 거꾸로 index를 계산한다.

console.log(text.slice(-5, 2))   // => ""
console.log(text.slice(-5, -2))  // => "zil"

• slice()가 substring()보다 범용적이다.

참고문헌

• MDN substr()
• MDN substring()
• MDN slice()