본문 바로가기
programming/javascript

자바스크립트 배열 문자열 변환하기 Converting javscript array to string

by 개코 - 개발과 코딩 2021. 12. 23.

자바스크립트는 거의 모든 데이터타입이 문자열로 변환이 가능하다. 자바스크립트 배열도 마찬가지이다. 자바스크립트 배열을 문자열로 변환하는 것은 자동적으로 암시적으로 이루어지지만 toString(), join() 메서드를 이용하여 자바스크립트 배열을 문자열로 변환할 수도 있다.

자바스크립트 배열 문자열 변환
Converting javscript array to string

자바스크립트는 파이썬과 같이 데이터 타입에 관대하다.

특히 변환 가능한 모든 데이터 타입은 자바스크립트에서 문자열로 변환이 자동으로 이루어진다.

하다못해 배열이나 객체들도 변환이 된다.

눈으로 보면 이것이 문자열인지 객체인지 난해할 때도 있을 정도

이 때는 typeof() 함수와 함께 사용하여 데이터타입을 찾을 수 있다.

toString() 메서드 join() 메서드

자바스크립트 배열은 자동으로 문자열로 변환되지만 별도의 메서드를 사용하여 문자열로 변환할 수도 있다.

toString() 메서드를 사용하면 단순히 문자열로 변환이 가능하다.

join() 메서드를 사용해도 문자열로 변환이 되지만, 차이점은 구분자를 지정할 수 있다.

Array.toString()

Array.join("+")

샘플코드

위의 사용법을 가지고 간단한 자바스크립트 예제를 만들어 본다.

코드를 그대로 사용할 것이기 때문에 어려운 것이 없다.

자바스크립트 배열을 단순히 문자열로 바꾸기 위해 toString() 메서드를 사용하였다.

기본구분자는 쉼표이다.

자바스크립트 배열을 문자열로 변환하고 구분자까지 변경하기 위해 join() 메서드를 사용하였다.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 배열 객체</h2>
        <div id="cont">
            <p id="ret1"></p>
            <p id="ret2"></p>
        </div>

        <script>

            let vComp = ["현대자동차","기아자동차","쌍용자동차","쉐보레"];
            
            console.log("----------");

            vText = vComp.toString();

            console.log(typeof(vText), vText);
            document.querySelector("#ret1").innerHTML = vText;

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

            vText = vComp.join("+");

            console.log(typeof(vText), vText);
            document.querySelector("#ret2").innerHTML = vText;

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

        </script>

    </body>
</html>

결과화면을 보자.

toString() 메서드를 사용했을 때와 join() 메서드를 사용했을 때의 변화에 차이가 있다.

둘 다 단순히 문자열로 변환이 되는 것을 확인할 수 있으며
배열의 구분자 또한 변경된 것을 확인할 수 있다.

반응형

댓글