<JavaScript> 문자열 slice와 substring

🔗 TIL에서 헷갈렸던 내용을 글로 따로 정리해보려 한다.

(혹시 틀린 정보가 있다면 댓글로 알려주세요!)

slice 메소드

문자열의 일부를 추출하면서 새로운 문자열을 리턴한다. 

시작 인덱스는 필수이지만, 끝 인덱스는 선택적이다. 

// 시작 인덱스부터 끝 인덱스 미만까지의 문자열 리턴
문자열.slice(시작 인덱스, 끝 인덱스);

// 끝 인덱스는 생략 가능
// 시작 인덱스만 설정하면 시작 인덱스부터 끝까지 출력해준다
문자열.slice(시작 인덱스);

문자열 '슬라이스가 뭐야'로 예시를 작성해봤다. 뭐든 모르겠을 땐 직접 작성해보는게 이해하는데 직빵이다.

let s = '슬라이스가 뭐야';

s.length; // 8

console.log(s.slice(0)); // 슬라이스가 뭐야
console.log(s.slice(6)); // 뭐야

console.log(s.slice(1, 4)); // 라이스
console.log(s.slice(0, 8)); // 슬라이스가 뭐야
console.log(s.slice(0, 7)); // 슬라이스가 뭐

slice 메소드는 전달인자에 음수값을 넣어 인덱싱이 가능하다.

사실 음수 인덱스는 조금 헷갈려서 그냥 MDN을 긁어왔다.

만약 음수라면, endIndex는 strLength(문자열 길이) + endIndex로 취급됩니다.
(예를 들어 endIndex가 -3이면 종료점은 strLength - 3)

똑같이 '슬라이스가 뭐야'로 보면 아래와 같이 카운트된다.

슬(-7) 라(-6) 이(-5) 스(-4) 가(-3) ' '(-2) 뭐(-1) 야(-0)

console.log(s.slice(-7, -4)); // 라이스
console.log(s.slice(0, -1)); // 슬라이스가 뭐

전달인자로 음수 하나만 넣어주면 자동으로 끝 인덱스로 인식한다.

-0을 넣으면 그냥 0으로 인식해 처음부터 끝까지 출력한다. (이 부분은 캡쳐를 못했음)

직접 1부터 쳐봤다

 

substring 메소드

쓰는 방식은 slice 메소드와 동일하다. 

단지 음수 인덱싱이 불가능하다는 차이만 있다. 

 

 

참고 링크

String.prototype.slice() - JavaScript | MDN

 

자바스크립트 문자열 자르기 javsScript slice(), subString(), subStr() method 사용법