야근시렁

문자열을 다루는 함수들은 실무에서도 많이 사용되고 있습니다. 

알아두면 유효하게 쓸 수 있습니다. 

1. slice 함수

slice 함수는 문자열의 부분 문자열을 추출하여 반환합니다. 

시작 인덱스와 종료 인덱스를 인자로 받아 해당 범위의 문자열을 반환합니다. 

const str = "Hello, world!";
const slicedStr = str.slice(0, 5); // 0번째부터 4번째 글자까지
const slicedStrLast = str.slice(-6); // 마지막부터 5번째 글자까지 
console.log(slicedStr); // "Hello"
console.log(slicedStrLast); // "world!"

2. split 함수

split 함수는 문자열을 특정 구분자를 기준으로 분할하여 배열로 반환합니다.

구분자를 인자로 받아 해당 구분자를 기준으로 문자열을 분할합니다.

const str = "apple,banana,orange";
const fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "orange"]

3. substring 함수

substring 함수는 문자열의 부분 문자열을 추출하여 반환합니다. 

시작 인덱스와 종료 인덱스를 인자로 받아 해당 범위의 문자열을 반환합니다. 

slice와 달리, substring은 음수 인덱스를 사용하지 않고 음수 인텍스가 있는 경우, 0으로 취급해버립니다.

const str = "Hello, world!";
const subStr = str.substring(0, 5);
console.log(subStr); // "Hello"

정리하자면, 

slice와 substring은 새로운 문자열은 반환하고, split은 배열을 반환합니다. 

slice와 substring은 매우 흡사하지만, 

slice의 경우 만약 음수를 사용해서 끝에서 부터 자를 수 있고, 시작 인덱스와 마지막 인덱스의 값이 뒤바뀐 경우 "" 를 리턴하지만, substring의 경우 음수는 사용 불가하지만,  시작 인덱스와 마지막 인덱스의 값이 뒤바뀐 경우 알아서 순서를 바꿔줍니다. 

다음의 코드 예시를 살펴보면 이해하기 더 쉬울 것 같습니다.

const str = "I like chocolate!";

// slice
console.log(str.slice(6, 2));  // "" (빈 문자열 반환)
console.log(str.slice(-10));    // "chocolate!"

// substring
console.log(str.substring(6, 2));  // "like" (인덱스 2와 6 사이의 문자열 반환)
console.log(str.substring(-10));    // "Hello, world!" (음수 인덱스를 0으로 취급)