Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript slice() 메서드 완벽 가이드: 문자열 추출 방법과 실전 예제

JavaScript slice() 메서드란?

slice() 메서드는 문자열의 일부를 추출하여 새로운 문자열로 반환하는 JavaScript 내장 메서드입니다. 원본 문자열은 절대 변경되지 않으며, 항상 새로운 문자열이 생성된다는 점이 특징입니다.

기본 문법

slice() 메서드는 두 개의 매개변수를 받습니다. 하나는 시작 인덱스(starting index), 다른 하나는 종료 인덱스(ending index)입니다. 기본 형식은 아래와 같습니다.

string.slice(startingIndex, endingIndex)

매개변수 설명

a) 시작 인덱스(starting index): 문자열 추출을 시작할 위치의 인덱스를 지정합니다.

b) 종료 인덱스(ending index): 문자열 추출이 멈추기 직전의 인덱스를 지정합니다. 즉, 이 인덱스 바로 앞 문자까지만 결과에 포함됩니다.

예제 1: 시작 인덱스와 종료 인덱스 지정하기

다음 예제에서 slice() 메서드는 주어진 문자열을 인덱스 18부터 26(27-1)까지 잘라내어 새로운 문자열을 만들며, 그 결과 "Neuralink"가 출력됩니다.

<html>
<body>
<p id="slice"></p>
<script>
    var string = "Tesla, Solarcity, Neuralink, Spacex";
    var newstring = string.slice(18, 27);
    document.getElementById("slice").innerHTML = newstring;
</script>
</body>
</html>

출력 결과

Neuralink

예제 2: 시작 인덱스만 지정하기

종료 인덱스 없이 시작 인덱스만 전달하면, slice() 메서드는 해당 인덱스부터 문자열 끝까지 전체를 잘라내어 반환합니다.

아래 예제에서는 시작 인덱스(18)만 제공되었으므로, 해당 위치부터 문자열 끝까지의 모든 내용이 출력됩니다.

<html>
<body>
<p id="slice"></p>
<script>
    var string = "Tesla, Solarcity, Neuralink, Spacex";
    var newstring = string.slice(18);
    document.getElementById("slice").innerHTML = newstring;
</script>
</body>
</html>

출력 결과

Neuralink, Spacex

추가 팁: 음수 인덱스 활용하기

slice() 메서드는 음수 인덱스도 지원합니다. 음수 값은 문자열 끝에서부터 역방향으로 계산됩니다. 예를 들어 string.slice(-6)은 뒤에서 여섯 번째 문자부터 끝까지 추출합니다. 또한 종료 인덱스를 생략하면 자동으로 문자열 끝까지 처리되므로, 상황에 따라 유연하게 활용할 수 있습니다.