본문 바로가기
programming/javascript

자바스크립트 slice 문자열 자르기 함수 사용 방법 javascript slice string method

by 개코 - 개발과 코딩 2021. 11. 4.

자바스크립트 문자열을 추출할 때 slice 메서드를 사용한다 시작위치와 끝위치를 사용하여 문자열을 추출할 수 있다. 시작위치와 끝위치를 음수로 지정하여 문자열을 추출할 수도 있다. slice 메서드는 자바스크립트에서 유연하게 문자열을 추추출하고 가공할 수 메서드이기도 하다.

자바스크립트 slice 문자열 자르기 함수
javascript slice() string method

문자열을 다루는 것은 귀찮기만 하다.

어떤 프로그래밍 언어든 마찬가지이기도 하다.

자바스크립트도 마찬가지이다.

slice 메서드는 자바스크립트의 문자열의 인덱스번호를 이용하여 특정단어를 추출할 수 있다.

slice 문자열 자르기 함수

자바스크립트 문자열 메서드 중 slice 메서드는 인덱스번호를 이용하여 문자열의 일부분을 추출할 수 있다.

인덱스번호는 시작번호와 끝번호를 이용할 수 있다.

좌측부터 시작할 수도 있고, 우측부터 시작할 수 있다.

즉, 인덱스번호를 시작번호부터 추출할 수 있고, - 부호가 붙어 끝번호부터 문자열을 추출할 수 있다.

사용법

자바스크립트의 slice 함수는 4가지의 형태로 사용될 수 있다.

크게 2가지의 큰 의미만 이해하면 된다.

시작위치 ( start ) 만 있는 경우 시작위치부터 마지막까지 문자열을 추출한다.

시작위치 ( start ) 와 끝위치 ( end ) 가 있는 경우 시작위치부터 끝위치까지 문자열을 추출한다.

코드를 작성하다다 보면 끝 위치는 실제적으로 포함되지 않으며 끝위치 - 1 지점까지 추출된다. 

만약 문자열의 뒤에서부터 추출하고 싶다면 -부호를 사용한다.

String.slice(start);
String.slice(start, end);
String.slice(-start);
String.slice(-start, -end);

샘플 코드

실제로 코드를 만들어 실행을 시켜보도록 하자.

시작위치와 끝위치를 정밀하게 표시하기 위해 문자열의 인덱스번호까지 출력해 보도록 한다.

우측부터 시작하는 양수 위치와 좌측부터 시작하는 음수 위치까지 인덱스번호까지 출력해 본다.

문자열을 하나 만들어 주었다.

반복문을 통해 양수 인덱스번호와 음수인덱스번호를 출력하고 단어 하나하나 출력해 본다.

인덱스번호를 참고하여 slice 메서드를 사용하여 특정 문자열을 추출해 본다.

<!DOCTYPE html>
<html>
    <body>

        <h1>자바스크립트 특수문자</h1>

        <script>

            console.log("----------");

            let vStr = "파이썬,자바스크립트,웹프로그래밍";

            for (let lpC of vStr) {
                console.log(typeof(lpC), vStr.indexOf(lpC), "-1" * (vStr.length - vStr.indexOf(lpC)), lpC);
            }
            
            console.log("----------");

            vStrExt = vStr.slice(11);
            console.log(typeof(vStrExt), vStrExt);

            vStrExt = vStr.slice(4, 10);
            console.log(typeof(vStrExt), vStrExt);

            vStrExtNgt = vStr.slice(-6);
            console.log(typeof(vStrExtNgt), vStrExtNgt);

            vStrExtNgt = vStr.slice(-13, -7);
            console.log(typeof(vStrExtNgt), vStrExtNgt);
            
            console.log("----------");

        </script>
        
    </body>
</html>

결과화면과 코드를 비교하면 이해할 수 있다.

첫번째와 두번째는 문자열의 문자들을 하나씩 추출을 하면서 인덱스를 출력한 것이다.

세번째는 slice 메서드를 사용하여 문자열을 추출한 결과이다.

반응형

댓글