JavaScript에서 백틱(템플릿 리터럴)으로 예기치 않은 문자열 연결 피하기

JavaScript에서 문자열과 숫자를 섞어서 연결할 때는 의도치 않은 결과가 나오기 쉽습니다. 이런 예기치 않은 문자열 연결(unexpected string concatenation)을 방지하려면 백틱(`)을 사용한 템플릿 리터럴(Template Literal)을 활용하는 것이 가장 안전하고 깔끔합니다.

템플릿 리터럴로 변수 값 삽입하기

먼저 다음과 같은 문자열 변수가 있다고 가정해 보겠습니다.

const concatValue = 'John,David,Mike';
var friendNames = `${concatValue}`;

이제 위 변수에 문자열과 숫자를 함께 조합하려면 아래와 같이 작성할 수 있습니다.

var studentNameWithFriends = ` ${concatValue}| 'Carol' | 24 `;

전체 코드 예제

다음은 문자열 연결 과정 전체를 보여주는 완성된 JavaScript 코드입니다.

const concatValue = 'John,David,Mike';
var friendNames = `${concatValue}`;
var studentNameWithFriends = ` ${concatValue}| 'Carol' | 24 `;
console.log(friendNames);
console.log(studentNameWithFriends);

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력하세요.

node fileName.js

여기서는 파일 이름이 demo37.js라고 가정하겠습니다.

실행 결과

코드를 실행하면 아래와 같은 출력을 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo37.js
John,David,Mike
John,David,Mike| 'Carol' | 24

정리

백틱을 사용하면 + 연산자 없이도 변수, 문자열, 숫자를 자유롭게 조합할 수 있으며, 값이 원하는 형태 그대로 출력됩니다. 특히 여러 타입의 값을 하나의 문자열로 묶을 때는 템플릿 리터럴을 사용하는 습관을 들이면 타입 변환으로 인한 혼란과 예기치 않은 문자열 연결 문제를 효과적으로 예방할 수 있습니다.