[JS] string.substring() & string.slice()

ssumniee·2021년 6월 18일
0

substring()

substring() 메소드는 string 객체의 문자열에서 beginIndex 부터 endIndex 전까지에 해당하는 부분 문자열을 반환한다.

사용법

strName.substring(beginIndex, endIndex);

예시

let str = 'abcdefgh';
str.substring(0, 3); // 'abc'

slice()

slice() 메소드 역시 string 객체의 문자열 중 beginIndex 부터 endIndex 전까지의 부분 문자열을 반환한다.

사용법

strName.slice(beginIndex, endIndex)

예시

사용법 역시 substring() 메소드와 거의 유사하다.

let str = 'abcdefgh';
str.slice(0, 3); // 'abc'

공통점

endIndex 가 생략된 경우, beginIndex 부터 문자열의 끝까지 모든 문자를 추출한다.

let str = 'abcdefgh';
str.substring(4); // 'efgh'
str.slice(4); // 'efgh'

beginIndexendIndex 가 같은 경우 빈 문자열을 반환한다.

let str = 'abcdefgh';
str.substring(5, 5); // ''
str.slice(5, 5); // ''

NaN를 인자로 받은 경우 해당 인자를 0으로 처리한다.

let str = 'abcdefgh';
str.substring('hello', 3); // 'abc'
str.slice('hello', 3); // 'abc'

stringName.length 보다 큰 값을 인자로 받은 경우 해당 인자를 stringName.length 과 동일한 값으로 처리한다.

let str = 'abcdefgh';
str.substring(3, 100); // 'defgh'
str.slice(3, 100); // 'defgh'

차이점

endIndex 보다 beginIndex 가 큰 경우,

substring() 메소드는 마치 두 인자를 바꾸어 입력한 것처럼 작동한다.
반면, slice() 메소드는 빈 문자열을 반환한다.

let str = 'abcdefgh';
str.substring(5, 2); // 'cde'
str.slice(5, 2); // ''

인덱스 값으로 음수를 입력받은 경우,

substring() 메소드는 마치 해당 인자를 0으로 취급한다.
반면, slice() 메소드는 문자열의 해당 인자의 절댓값만큼 마지막 문자부터 거꾸로 세어 도달한 문자의 인덱스 값을 해당 인자의 값으로 취급한다. 해당 인자를 stringName.length + (음수 인자) 로 취급하는 것.

let str = 'abcdefgh';
str.substring(-2, 4); // str.substring(0, 4)와 같음, 'abcd'
str.slice(-2, 4); // str.slice(6, 4)와 같음, ''
profile
개발에 뛰어든 UX/UI 디자이너

0개의 댓글