정의 및 사용 방법

문자열에서 slice() 함수는
주어진 문자열의 특정 범위를 잘라내어(slice) 추출한 결과를 새로운 문자열로 반환합니다.

이 함수는 문자열을 잘라서 추출하는데 매우 유용합니다.

특징

  • 지정한 인덱스 범위로 잘라낸 문자열를 새로운 문자열로 반환합니다.
  • 인덱스 범위는 매개 변수로 지정한 시작점부터 끝점까지(끝점을 포함하지 않음, 직전까지 추출)입니다.
  • 이러한 동작으로 주어진 원본 문자열은 변경되지 않고 그대로 유지됩니다.

문자열에서 인덱스는 0부터 시작합니다.

사용법을 시각화하면 다음과 같습니다. 
'가나다'.slice(0, 2); 👉 '가나'

기본 예제

JavaScript 
/**
 * 문자열의 특정 범위를 추출하여 새로운 문자열로 반환하는 함수
 * 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()가 배열의 특정 범위의 요소를 잘라내어 추출한 결과를 새로운 배열로 반환합니다.

구문

JavaScript 
str.slice(beginIndex)
str.slice(beginIndex, endIndex)

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

매개변수

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

주의할 점: 이모지(Emoji)를 자를 때

자바스크립트에서 문자열을 자르는 slice()나 substring()같은 문자열 함수는 사람이 인식하는 문자 개수가 아니라, 문자열이 내부적으로 저장되는 **UTF-16 코드 유닛(Code Unit)**을 기준으로 인덱스를 계산합니다.

일반적인 영어 문자나 한글은 하나의 코드 유닛으로 표현되지만, 'UTF-16 코드 유닛' 하나로 표현할 수 없는 이모지(예: 😃, 🎉, ❤️)는 두 개의 코드 유닛으로 구성된 **서로게이트 쌍(Surrogate Pair)**을 사용합니다.

다음은 "UTF-16 코드 유닛(Code Unit)" 용어에 대한 간단한 부연설명입니다.
UTF-16 코드 유닛(Code Unit)
자바스크립트는 문자열의 길이(인덱스)를 계산할 때 'UTF-16 코드 유닛'을 기준으로 합니다.
UTF-16에서 코드 유닛이란, 문자열을 내부적으로 저장하고 처리하기 위해 사용하는 16비트(2바이트) 크기의 단위를 의미합니다. 자바스크립트의 문자열 length 값은 이 코드 유닛의 개수를 나타냅니다. 영어 문자, 숫자, 그리고 일반적인 한글은 하나의 'UTF-16 코드 유닛'으로 표현되므로, 문자열의 길이와 인덱스에서도 각각 1로 계산됩니다.
반면, 'UTF-16 코드 유닛' 하나로 표현할 수 없는 이모지는 두 개의 코드 유닛을 한 쌍으로 조합해 하나의 문자로 처리됩니다. 이러한 두 코드 유닛의 조합을 '서로게이트 쌍(Surrogate Pair)'이라고 부릅니다.
JavaScript 
// 🚨 코드 유닛 기준으로 잘리는 예
'😃🏀🍅'.slice(0, 2);
// 결과: '😃'
// 2개의 문자를 자른 것처럼 보이지만,
// 실제로는 2개의 코드 유닛만 추출되어 첫 번째 이모지만 반환됩니다.

// ❌ 이모지를 중간에서 자르는 위험한 예
'😃🏀🍅'.slice(0, 1);
// 결과: 깨진 문자
// 서로게이트 쌍의 절반만 잘려 문자 데이터가 손상됩니다.

이처럼 slice()는 UTF-16 코드 유닛 단위로 문자열을 처리하기 때문에, 이모지가 포함된 문자열을 문자(Code Point) 단위로 자르려는 목적에는 적합하지 않습니다.

이모지를 포함한 문자열을 사람이 인식하는 문자 단위로 안전하게 처리하려면, 다른 방식의 접근이 필요합니다.

앞서 보았듯이, slice()는 UTF-16 코드 유닛 단위로 동작하므로 이모지를 문자(Code Point) 단위로 처리하려는 경우에는 그대로 사용하기 어렵습니다.

이 문제를 해결하려면 문자열을 코드 유닛이 아닌, **유니코드 문자 단위(Code Point)**로 인식하도록 변환해야 합니다.

가장 현대적이고 권장되는 두 가지 방법은 다음과 같습니다.

Spread 구문 또는 Array.from() 사용

스프레드 구문(...)이나 Array.from()은 문자열을 배열로 변환할 때, 자바스크립트의 문자열 이터레이션 규약에 따라 서로게이트 쌍을 하나의 유니코드 문자(Code Point)로 처리합니다.

해결 원리
  • 변환: '😃🏀' → ['😃', '🏀']
  • 조작: 배열은 요소 단위로 배열의 slice()가 동작함
  • 결합: 배열 요소를 연결하여 문자열로 변환하는 join()으로 다시 문자열로 합침
JavaScript 
const emojiString = '😃🏀🍅🐵';

// Spread 구문을 사용해 문자 단위 배열로 변환
const emojiArray = [...emojiString];
// ['😃', '🏀', '🍅', '🐵']

// 원하는 문자 개수만큼 안전하게 자르기
const result = emojiArray.slice(0, 2).join('');

console.log(result);
// 출력: "😃🏀"

이 방식은 이모지를 포함한 문자열을 사람이 인식하는 문자 단위로 안전하게 처리할 수 있습니다.

이모지(😊)에 관해서는 웹 페이지에서 이모지(이모티콘) 사용하기를 참고하세요.

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

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

부연설명
substring() 함수는 문자열의 일부분을 추출합니다.
문자열을 인수로 전달된 시작 인덱스부터 종료 인덱스 전까지 추출해서 문자열로 반환하는 함수입니다.

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

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

// slice()
console.log(str.slice(4, 1));  // "" (빈 문자열)

// substring()
console.log(str.substring(4, 1));  // "ava"

활용 예제

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

부분 문자열 추출

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

JavaScript 
const originalString = "Hello, World!";
const slicedString = originalString.slice(0, 5);

console.log(slicedString); // 출력: "Hello"

문자열의 일부 변경

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

JavaScript 
const greeting = "Hello";
const modifiedGreeting = greeting.slice(0, 3) + "p!";

console.log(modifiedGreeting); // 출력: "Help!"

문자열의 일부를 제거

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

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

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

명세서

slice() 함수에 대한 명세서 사양
명세서 사양
slice() ECMAScript® 2026 Language Specification
#sec-string.prototype.slice

호환성

slice() 함수에 대한 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Node.js
Node.js
slice() 1 12 1 1 0.10

참고문헌

같이 보기