JavaScript에서 배열에 담긴 여러 요소를 하나의 문자열로 변환하고 싶다면 toString() 메서드를 활용할 수 있습니다. 이 메서드는 배열의 모든 요소를 쉼표(,)로 구분하여 하나의 문자열로 합쳐 반환하며, 별도의 인수 없이 간단하게 사용할 수 있다는 장점이 있습니다.
예제 코드
아래는 버튼 클릭 시 배열(arr)을 문자열로 변환하여 화면에 출력하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript 배열을 문자열로 변환하기</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 배열 arr이 문자열로 변환됩니다</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let arr = ["소", "사자", "호랑이", "개", "고양이"];
BtnEle.addEventListener("click", () => {
resEle.innerHTML = arr.toString();
});
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 배열의 모든 요소가 쉼표로 구분된 하나의 문자열로 변환되어 표시됩니다.
핵심 정리
toString() 메서드는 배열뿐만 아니라 다른 객체에도 사용할 수 있는 범용 메서드입니다. 배열에 적용하면 join(',')과 동일한 결과를 반환하며, 만약 배열 대신 일반 객체에 사용하면 "[object Object]"라는 문자열이 반환되므로 주의해야 합니다. 또한 중첩된 배열의 경우 내부 배열까지 한 번에 평탄화되어 문자열로 변환됩니다.