[JavaScript] 부분 문자열 추출하는 방법

 

typescript-eslint이슈에서 부분 문자열을 찾는 메서드인 slice나 substr등을 사용하지 않고 startsWith과 endsWith을 사용하는 prefer-string-starts-ends-with규칙 관련 버그 이슈를 봤다. startsWith를 모르기도 했었고 이 참에 문자열 추출하는 메서드들을 비교, 정리하고자 한다.

 

slice(start, end)

slice(start, end)는 start부터 end까지의 문자열을 반환한다. end는 생략될 수 있으며 생략할 경우 start부터 문자열 끝까지를 반환한다. 또한 start와 end는 음수가 될 수 있다. 음수일 경우 문자열 뒤에서 부터 검색한다.

 

foo = 'javascript';

foo.slice(0, 5);     // 'javas'
foo.slice(3);        // 'ascript'
foo.slice(3, -1);    // 'ascrip'
foo.slice(-5, -2);   // 'cri', 끝에서 5번째 부터 끝에서 2번째 까지

 

substring(start, end)

substring은 start가 end보다 커도 된다는 것과 음수를 허용하지 않는다는 것을 제외하면 slice와 동일한 역할을 한다. 음수를 넘길 경우 0으로 처리해서 반환한다.

 

foo = 'javascript';

foo.substring(3, 7);   // 'ascr'
foo.substring(7, 3);   // 'ascr'
foo.substring(3, -1);  // 'jav'

foo.slice(3, 7);       // 'ascr'
foo.slice(7, 3);       // ''

 

substr(start, length)

substr는 slice와 substring과는 다르게 두 번째 인자에 찾고자 하는 문자열의 길이를 넘긴다. 즉 start부터 시작해 length만큼의 길이의 문자열을 반환한다. start는 음수가 될 수 있으며 음수일 경우 뒤에서 부터 length만큼의 문자열을 반환한다.

 

foo = 'javascript'

foo.substr(3, 2);   // 'as'
foo.substr(5, 1);   // 'c'
foo.substr(-3, 2);  // 'ip'

 

startsWith

startsWith는 단어 그대로 문자열이 특정 문자열로 시작하는지를 반환한다.

 

foo = 'javascript';

foo.startsWith('jav');   // true
foo.startsWith('av');    // false

 

endsWith

endsWith은 문자열이 특정 문자열로 끝나는지를 반환한다.

 

foo = 'javascript.png';

foo.endsWith('.png');       // true
foo.endsWith('script');     // false

 

indexOf

indexOf메서드는 찾고자 하는 문자열의 인덱스를 리턴한다. 찾지 못할 경우 -1을 리턴한다.

 

foo = 'javascript substring';

foo.indexOf('a');    // 1
foo.indexOf('s');    // 4
foo.indexOf('sub');  // 11 
foo.indexOf('Hi');   // -1

 

두 번째 인자 값으로 pos값을 넣어주면, 인덱스 pos부터 문자열을 검색한다.

 

foo.indexOf('s', 5);  // 11
foo.indexOf('a', 2);  // 3