자바스크립트 문자열 slice() 함수 – 개념 정리 및 사용 예제

`String.prototype.slice()` 사용법

문자열에서 slice() 함수는
문자열의 특정 범위의 문자열을 잘라내어(slice) 추출한 결과를 새로운 문자열로 반환하는 함수입니다.
이 함수를 사용하여 문자열의 원하는 범위를 추출할 수 있습니다. 이 과정에서 원본 문자열은 바뀌지 않습니다.

배열에서는 Array.prototype.slice()가 배열의 특정 범위의 요소를 잘라내어 추출한 결과를 새로운 배열로 반환합니다.

JavaScript 문자열에서 slice() 함수로 특정 범위의 문자열을 추출하기

/**
 * 문자열의 특정 범위를 추출하여 새로운 문자열로 반환하는 함수
 * str.slice(beginIndex[, endIndex])
 * 
 * @param {number} beginIndex - 추출을 시작할 부분 문자열의 시작 인덱스.
 * @param {number} endIndex - 추출을 종료할 부분 문자열의 끝 인덱스 (직전까지 추출).
 * @returns {string} - 추출된 부분 문자열.
*/

/*
 * 주의하세요!
 * 문자열에서 인덱스는 0부터 시작합니다.
 * 첫 번째 문자열의 인덱스는 0이고, 두 번째 문자열의 인덱스는 1입니다.
*/

const greeting = "환영합니다. 코딩에브리바디입니다.";

const hello = greeting.slice(0, 6);
console.log(hello); // 출력: "환영합니다."

const niceTomeetYou = greeting.slice(7, 9);
console.log(niceTomeetYou); // 출력: "코딩"

/* 👇 원본 문자열은 바뀌지 않습니다. */
console.log(greeting); // 출력: "환영합니다. 코딩에브리바디입니다."

참고하세요!
slice() 함수명의 유래는 그 함수의 동작과 관련이 있습니다. "slice"라는 용어는 어떤 대상에서 일부분을 잘라내거나 조각으로 추출하는 동작을 나타냅니다. 문자열의 slice() 함수는 이러한 동작을 수행하는 함수로, 원본 문자열에서 특정 범위의 문자열을 "잘라내서" 새로운 문자열로 만듭니다. 따라서 함수명 slice()는 해당 동작을 명확하게 나타내기 위해 사용되었을 것으로 생각됩니다.

slice() 함수의 형식은 다음과 같습니다.

구문

str: slice() 함수를 적용할 원본 문자열입니다.

매개변수

slice() 함수의 매개변수 설명
`beginIndex`	옵션. 추출을 시작할 `0`부터 시작하는 인덱스를 지정합니다. 생략하면 기본값으로 `0`이 사용됩니다. 음수 값을 사용할 수 있으며, 이 경우 문자열의 끝에서부터 역으로 카운트됩니다. 추출한 문자열의 길이(`str.length`)보다 크거나 같으면 아무것도 추출되지 않습니다.
`endIndex`	옵션. 추출을 끝낼 인덱스를 지정합니다. `slice()`는 지정한 이 `endIndex` 인덱스를 제외하고 추출합니다. 생략하면 문자열의 끝까지 추출합니다. 음수 값을 사용할 수 있으며, 이 경우 문자열의 끝에서부터 역으로 카운트됩니다. 추출한 문자열의 길이(`str.length`)보다 크거나 같으면 문자열의 끝까지 추출합니다.

자바스크립트 length 속성의 이해와 사용 방법

반환 값

slice() 함수는 원본 문자열의 특정 범위를 추출하여 새로운 문자열로 반환합니다.
반환되는 이 새로운 문자열은 원본 문자열의 일부 문자열를 복사한 것이므로, 원본 문자열은 바뀌지 않습니다.

매개변수와 반환 값 예시

JavaScript

let str1 = "환영합니다.", // str1의 길이는 6입니다.
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -1),
    str4 = str1.slice(),
    str5 = str1.slice(30);
    
console.log(str2); // 출력: "영합니다."
console.log(str3); // 출력: "다"
console.log(str4); // 출력: "환영합니다."
console.log(str5); // 출력: ""

`slice()`와 `substring()` 함수의 차이점

slice()와 substring() 함수는 거의 동일하게 작동하지만 인수를 처리하는 방식에서 몇 가지 미묘한 차이점이 있습니다.

자바스크립트 substring() 함수

아래 테이블은 slice() 및 substring() 함수의 차이점을 비교한 것입니다.

slice()와 substring() 함수의 차이점 비교
차이점	`slice()`	`substring()`
음수 인덱스 지원	음수 값은 끝에서부터의 역으로 카운트됨	음수 값은 `0`으로 처리됨
시작 인덱스가 종료 인덱스보다 클 때	시작 인덱스가 종료 인덱스보다 클 때 교환 없음. 빈 문자열(`""`)을 반환	시작 인덱스가 종료 인덱스보다 클 때 교환

사용 예시

slice() 함수는 자바스크립트에서 문자열을 다룰 때 다양한 상황에서 유용하게 활용됩니다. 몇 가지 대표적인 활용 예시는 다음과 같습니다.

부분 문자열 추출

slice() 함수는 문자열 내에서 특정 범위의 문자를 추출하는 데에 사용됩니다. 이를 통해 필요한 부분 문자열을 손쉽게 얻을 수 있습니다.

문자열의 일부 변경

추출한 부분 문자열을 수정하거나 다른 문자열과 결합하여 새로운 문자열을 생성할 때 유용합니다.

문자열의 일부를 제거

특정 범위의 문자를 추출하지 않고, 제거하고 싶을 때 slice() 함수를 사용할 수 있습니다.

JavaScript

const originalString = "안녕하세요. 자바스크립트!";
const stringWithoutSegment = originalString.slice(0, 5) + originalString.slice(-1);

console.log(stringWithoutSegment); // 출력: "안녕하세요!"