JavaScript에서 여러 문자열을 연결하는 방법

JavaScript에서 여러 개의 문자열을 하나로 합쳐야 할 때 가장 간편한 방법 중 하나는 Array.join() 메서드를 사용하는 것입니다. 배열에 담긴 문자열들을 지정한 구분자(separator)로 이어 붙여 하나의 문자열로 반환해 줍니다.

예를 들어, 다음과 같은 세 개의 이름이 담긴 문자열을 하나로 연결한다고 가정해 보겠습니다.

John
Amit
Sachin

Array.join() 기본 문법

배열.join(구분자)

구분자: 문자열 사이에 삽입할 값입니다. 생략하면 기본값으로 쉼표(,)가 사용됩니다.
빈 문자열('')을 구분자로 넣으면 모든 요소가 공백 없이 그대로 이어집니다.

예제

아래 코드는 배열에 저장된 여러 문자열을 쉼표와 공백(', ')으로 구분하여 하나의 문자열로 연결하는 예제입니다.

<html>
   <body>
      <script>
         var arr = ['Amit', 'John', 'Sachin'];
         document.write(arr.join(', '));
      </script>
   </body>
</html>

실행 결과

Amit, John, Sachin

다른 문자열 연결 방법

Array.join() 외에도 JavaScript에서는 다양한 방식으로 문자열을 연결할 수 있습니다.

1. 더하기(+) 연산자

var result = 'Amit' + ', ' + 'John' + ', ' + 'Sachin';

2. concat() 메서드

var result = 'Amit'.concat(', ', 'John', ', ', 'Sachin');

3. 템플릿 리터럴(Template Literal)

ES6부터는 백틱(`)을 사용한 템플릿 리터럴로 가독성 좋게 문자열을 조합할 수 있습니다.

const names = ['Amit', 'John', 'Sachin'];
const result = `${names[0]}, ${names[1]}, ${names[2]}`;

정리

여러 문자열을 일관된 구분자로 연결할 때는 Array.join()이 가장 깔끔하고 효율적입니다. 특히 배열 형태로 데이터를 다룰 때 반복문 없이 한 줄로 처리할 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다.

JavaScript에서 여러 문자열을 연결하는 방법 – Array.join() 활용법