JavaScript / String.concat()으로 문자열 연결하기

String.concat()은 기존 문자열 뒤에 전달한 값을 순서대로 붙여 새 문자열을 반환합니다. 원본 문자열은 바뀌지 않습니다. 숫자 등 문자열이 아닌 인수는 문자열로 변환되므로, null이나 배열을 넘길 때 원하는 표시가 맞는지 확인해야 합니다.

여러 값을 순서대로 연결하기

base.concat(value1, value2, ...)처럼 둘 이상의 인수를 한 번에 줄 수 있습니다. 메서드가 공백이나 구분자를 자동으로 넣지는 않으므로 필요한 문자를 인수에 포함하세요. 인수를 주지 않으면 원본과 같은 내용의 문자열이 나오지만 별도로 연결되는 내용은 없습니다.

const base = 'Hello';
const result = base.concat(' ', 'World', ' #', 3);
console.log(result); // 'Hello World #3'
console.log(base);   // 'Hello'
console.log(typeof result); // 'string'

3은 문자열 "3"으로 변환되어 붙습니다. 숫자와 더하기 연산을 섞는 표현은 피연산자의 형에 따라 산술 또는 문자열 연결이 될 수 있으므로, 변환이 의도인지 드러내세요. MDN의 String.concat() 문서에서 인수 변환 규칙을 확인할 수 있습니다.

null과 배열을 인수로 넣을 때

concat()은 인수의 의미를 추측하지 않고 문자열로 변환합니다. null은 글자 그대로 "null"이 되고, 배열은 보통 쉼표로 이어진 문자열이 됩니다. 값이 없을 때 아무것도 붙이지 않으려면 호출 전에 기본값을 정하세요.

console.log('값: '.concat(null));       // '값: null'
console.log('값: '.concat(['A', 'B'])); // '값: A,B'
const maybe = null;
console.log('값: '.concat(maybe ?? '')); // '값: '

배열 자체를 합치는 Array.concat()과 이름이 같지만 반환형과 목적이 다릅니다. 문자열의 concat()은 결과가 문자열이고, 배열의 concat()은 새 배열을 만듭니다. 잘못된 자료형이 조용히 출력에 섞이지 않도록 입력값을 확인하세요.

+ 연산자와 템플릿 리터럴을 쓸 때

간단한 문장은 + 연산자나 템플릿 리터럴로도 만들 수 있습니다. 여러 변수와 고정 문장이 섞여 있다면 템플릿 리터럴이 읽기 편할 수 있고, 이미 문자열 값에 몇 조각을 덧붙이는 경우에는 concat()이 의도를 분명히 합니다. 세 방법 중 어느 하나를 성능상 필수라고 가정할 필요는 없습니다.

const name = 'Mina';
console.log('안녕하세요, '.concat(name, '님.'));
console.log('안녕하세요, ' + name + '님.');
console.log(`안녕하세요, ${name}님.`);
// 세 결과 모두 '안녕하세요, Mina님.'

전체 예제: 원본과 결과 비교하기

아래 코드를 UTF-8로 string-concat.html에 저장해 브라우저에서 엽니다. 두 문자열과 숫자를 바꿔 ‘문자열 연결’을 누르세요. 결과와 원래 문자열, 결과 자료형을 함께 표시합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문자열 concat 연결</title>
</head>
<body>
<label for="first">첫 문자열</label>
<input id="first" type="text" value="Hello">
<label for="second">두 번째 문자열</label>
<input id="second" type="text" value="World">
<label for="count">번호</label>
<input id="count" type="number" value="3">
<button id="join" type="button">문자열 연결</button>
<pre id="output" aria-live="polite"></pre>
<script>
const first = document.querySelector('#first');
const second = document.querySelector('#second');
const count = document.querySelector('#count');
const output = document.querySelector('#output');

function show() {
  const base = first.value;
  const word = second.value;
  const number = Number(count.value);
  if (count.value.trim() === '' || !Number.isFinite(number)) {
    output.textContent = '횟수에는 유효한 숫자를 입력하세요.';
    return;
  }
  const result = base.concat(' ', word, ' #', number);
  output.textContent = `concat() 결과: ${JSON.stringify(result)}\n` +
    `원래 문자열: ${JSON.stringify(base)}\n` +
    `결과 자료형: ${typeof result}`;
}

document.querySelector('#join').addEventListener('click', show);
show();
</script>
</body>
</html>

기본 입력에서는 "Hello World #3"이 나오고 원래 문자열은 "Hello"로 남습니다. 번호를 8로 바꾸면 #8이 붙지만 결과 자료형은 여전히 string입니다. 공백은 코드의 첫 번째 연결 인수로 넣었으므로, 공백 없이 붙이고 싶다면 그 인수를 수정하면 됩니다.