substring과 slice

String을 추출하는 다양한 방법

substr()

• 해당 메서드는 더이상 지원하지 않는다.그래서 아래의 메서드를 사용하도록 하자 (문서)

 

substring()

사용법

String.substring(indexStart, indexEnd);

 

결과

• indexStart부터 indexEnd까지 반환하는데 indexEnd는 포함하지 않는다.
• 원본 데이터를 손상시키지 않는다.
• eg

  const str = 'apple';
  
  /* 2번째 index string은 반환하지 않음 */
  console.log(str.substring(0, 2)); // ap

 

주의

• `indexStart`가 `string`의 길이보다 클 경우, `indexStart`와 `indexEnd`를 교환하여 연산한다.

const str = 'apple';

/* 실제로 str.substring(2, 5) 이렇게 연산 */
console.log(str.substring(5, 2)); // ple

• 파라메터가 NaN이거나 음수일 경우, 모두 0으로 처리함

 

slice()

사용법

String.slice(indexStart, indexEnd);

 

결과

• indexStart부터 indexEnd까지 반환하는데 indexEnd는 포함하지 않는다.
• 원본 데이터를 손상시키지 않는다.

 

주의

• indexStart가 string의 길이보다 클 경우, 빈 string을 반환한다.

  const str = 'apple';
  
  console.log(str.substring(5, 2)); // ''

 

 

• indexStart가 음수일 경우, end부터 index를 세고, 숫자가 아니거나 없는 경우에는 0으로 처리된다.
• indexEnd가 생략되거나 정의되지 않았으면 end부터 index를 센다.
• indexEnd보다 indexStart가 클 경우, 빈 string을 반환한다.

 

substring과 slice의 공통점

• indexEnd를 포함하지 않고 그 이전까지 반환한다는 점
• 원본 데이터를 손상시키지 않고, 새 문자열을 반환한다는 점

 

substring과 slice의 차이점

• indexStart와 indexEnd가 음수일 때, 처리하는 방식
• indexStart가 indexEnd보다 작을 때, 처리하는 방식

 

각각 어디에 써야할까?

• substring에서 indexStart가 indexEnd보다 작아졌을 때, 서로 교환하여 사용되기 때문에 예상치 못한 결과를 발생시킬 수 있다. 이런 점에서 slice가 더 엄격하게 string을 조작할 수 있다.
• 또한 slice는 음수에 대한 제어가 가능하기 때문에 뒤에서부터 문자열을 추출해야한다면 slice를 사용하면 좋겠다.

 

ref

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substr