[JS] 문자열 자르기

문자열을 자를 때 사용되는 함수 substr(), substring(), slice() 3가지🤔

---

▪️ substr(start, length)

시작 위치(start - 인덱스)부터 지정된 길이(length)만큼의 문자열을 잘라 반환한다.
이때 공백도 포함되며, 길이(length) 생략시 시작 위치부터 끝까지 자른다.

const str = "Hello, world!";
const sub1 = str.substr(7, 5); // "world"
const sub2 = str.substr(0, 8); // "Hello, w"
const sub3 = str.substr(3); // "lo, world!"

▪️ substring(start, end)

시작 위치(start)부터 끝 위치(end - 지정된 인덱스 전까지)의 문자열을 잘라 반환한다.
이때 공백도 포함되며, 끝 위치(end) 생략시 시작 위치부터 끝까지 자른다.

const str = "Hello, world!";
const sub1 = str.substring(7, 12); // "world"
const sub2 = str.substr(3, 8); // "lo, w"
const sub3 = str.substr(3); // "lo, world!"
const sub4 = str.substr(0, 1); // "H"

substr() 는 지정된 길이(length)만큼 반환하지만, substring() 는 지정된 인덱스의 이전(end)까지 반환한다는 차이가 있다.

▪️ slice(start, end)

시작 위치(start)부터 끝 위치(end - 지정된 인덱스 전까지)의 문자열을 잘라 반환한다.
substring()과 마찬가지로 시작 위치와 끝 위치를 받지만, 음수를 허용하여 뒤에서부터의 위치도 지정할 수 있다.

const str = "Hello, world!";
const sub1 = str.slice(7, 12); // "world"
const sub2 = str.slice(-6); // "world!"

---

🤔 substring() VS slice()

두 함수의 차이점을 알고 쓰면 좋을 것 같다.

1. 음수 인덱스

substring(): 음수를 사용할 수 없으며, 음수를 입력하면 0으로 취급된다.

slice(): 음수를 사용하여 문자열의 끝에서부터 인덱싱할 수 있다.

const str = "Hello, world!";
const substringResult = str.substring(-8); // => 0으로 취급되어 "Hello, world!"
const sliceResult = str.slice(-8); // ", world!"

const substringResult2 = str.substring(-8, 2); // => str.substring(0, 2)으로 취급되어 "He"
const sliceResult2 = str.slice(-8, 2); // str.slice(13 - 8 = 5, 2) => ""
const sliceResult3 = str.slice(-8, 8); // str.slice(13 - 8 = 5, 8) => ", w"

2. 매개변수 처리

substring(): 시작 인덱스(start)가 끝 인덱스(end)보다 큰 경우 두 매개변수를 교환하여 처리한다.

slice(): 빈 문자열을 반환한다.

const str = "Hello, world!";
const substringResult = str.substring(7, 2); // => substring(2, 7) => "llo, "
const sliceResult = str.slice(7, 2); // ""