string.substring

substring() 메서드는 string 의 시작 index와 종료 index 전까지 혹은 문자열 끝 부분을 반환한다.

const str = 'Cats are the best';

str.substring(1, 3); // "at"
str.substring(2); // "ts are the best"

Syntax

str.substring(indexStart[, indexEnd])

Parameters

indexStart

반환된 부분 문자열에 포함할 첫번째 문자의 index

indexEnd (Optional)

반환된 부분의 문자열에서 제외할 첫번째 문자의 index

Return value

주어진 문자열의 지정된 부분을 포함하는 새로운 문자열

Description

substring() 메서드는 indexStart부터 추출하지만 indexEnd는 optional이라 포함하지 않아도 된다.

• 만약 indexEnd 가 생략된 경우, substring() 문자열의 끝까지 모든 문자를 반환한다.

• 만약 indexStart가 indexEnd 와 같을 경우, substring() 빈 문자열을 반환한다.

• 만약 indexStart 가 indexEnd보다 큰 경우, substring() 메서드는 마치 두 개의 인자를 바꾼 듯 작동한다.

0보다 작은 인자값을 가지는 경우에는 0으로,

stringName.length보다 큰 인자 값을 가지는 경우, stringName.length로 처리된다.

NaN 값은 0으로 처리된다.

Examples

substring() 사용하기

const anyString = 'Mozilla';

// M을 뽑아보자!
anyString.substring(0, 1); // "M"
anyString.substring(1, 0); // "M" 웃기넹 indexStart > indexEnd 때문에 두 개의 인자를 바꾼 듯 작동한다.


// Mozill 뽑기
anyString.substring(0, 6); // "Mozill"
anyString.substring(6, 0); // "Mozill"

// lla 뽑기
anyString.substring(4); // "lla"
anyString.substring(4, 7); // "lla"
anyString.substring(7, 4); // "lla"

// Mozilla 뽑기
anyString.substring(0); // "Mozilla"
anyString.substring(0, 7); // "Mozilla"
anyString.substring(0, 10); // "Mozilla"

length 속성과 함께 substring() 사용하기

substring()메서드와 length속성을 사용하여 특정 문자열의 마지막 문자를 추출한다. 시작 및 끝 index를 알 필요가 없기 때문에 이 방법이 더 편할 수 있다.

// 마지막 4글자인 illa 추출하기
let anyString = 'Mozilla';
anyString.substring(anyString.length - 4); // "illa"

// 마지막 5글자인 zilla 추출하기
anyString.substring(anyString.length - 5); // "zilla"

substring()과 substr()의 차이

substring()과 substr() 메서드 사이에는 미묘한 차이가 있으므로 혼동하지 않도록 주의해야 한다.

substring() 의 index는 시작위치와 종료 위치를 인덱스로 나타내는데, substr()인수는 시작 위치와 문자의 수를 나타낸다.

또한 ECMAScript에서 substr() 은 레거시 기능으로 간주되어 이후 버전에서 제거 될 수 있으므로 가능하면 사용하지 않는 것이 좋다.

const text = 'Mozilla';
text.substring(2, 5); // 'zil'
text.substr(2, 3); // 'zil'

substring()과 slice()의 차이

substring()과 slice()는 방법은 거의 동일하지만, 음수 index의 취급에 대해 두가지 미묘한 차이가 있다.

indexStart > indexEnd 일 경우 substring()은 두 개의 index를 스왑하고, slice()는 빈 문자열을 반환한다.

const text = 'Mozilla';
text.substring(5, 2); // "zil"
text.slice(5, 2); // ""

인자 하나 혹은 모두가 음수 또는 NaN인 경우, substring() 메서드는 이를 0으로 취급한다.

text.substring(-5, 2); // "Mo"
text.substring(-5, -2); // ""

slice() 는 인자가 NaN 인 경우 0으로 취급하지만, 음수인 경우 index를 뒤에서부터 거꾸로 세어 찾는다.

만약 인자가 -5라면 string.length - 5 로 해서 찾는다.

text.slice(-5, 2); // 7(text.length) - 5 text.slice(2, 2) => ''
text.slice(-5, -2); // text.slice(2, 5) => "zil"

문자열 내에서 부분 문자열 대체

다음 예제는 문자열의 부분 문자열을 바꾼다. 단독 문자와 부분 문자열을 모두 바꾼다.

'Brave New Word'라는 문자열을 'Brave New Web'으로 바꾼다.

// 문자열 fullS에서 "oldS"를 "newS"로 대체
function replaceString(oldS, newS, fullS) {
  for (let i = 0; i < fullS.length; ++i) {
    if(fullS.substring(i, i + oldS.length) === oldS) {
      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
    }
  }
  return fullS
}

replaceString('World', 'web', 'Brave New World'); // "Brave New web"

oldS 자체가 newS의 하위 문자열인 경우 (예: 여기서 'World'를 'otherWorld'로 대체하려고 시도 했을 경우) 무한 루프가 발생할 수 있다.

아하..for문중에 fullS를 변경하고.. ㅎ.. 다시 텍스트가 교체되고..ㅎ.. 또 for문이 돌아가고..ㅎ text가 교체되고 ㅎㅎ length는 계속 길어지고 ㅎㅎㅎ

function replaceString(oldS, newS, fullS) {
  return fullS.split(oldS).join(newS);
}

replaceString('World', 'otherWorld', 'Brave New World'); // "Brave New otherWorld"

무조건 2개로 나눠지고 그 사이에 newS가 들어가서 join되기 때문에! 바뀌는 문자열이 어디에 위치하던 상관 없다. 😮

하지만 대부분 replace를 사용한다.