JavaScript에서 템플릿 리터럴(Template Literal)이 정상적으로 동작하지 않는 가장 흔한 원인은 백틱(` `) 대신 작은따옴표(' ')를 사용했기 때문입니다.
ES6(ECMAScript 2015)에서 도입된 템플릿 리터럴은 문자열 보간(${변수})과 여러 줄 문자열을 지원하는 강력한 기능이지만, 반드시 백틱(`)으로 문자열을 감싸야만 합니다. 작은따옴표나 큰따옴표를 사용하면 ${} 구문이 단순한 문자열로 처리되어 변수 값이 치환되지 않습니다.
예제 코드
다음은 백틱을 사용하여 템플릿 리터럴을 올바르게 작성한 예제입니다.
var firstName = "John";
var lastName = "Smith";
console.log(`First Name is= ${firstName}\nLast Name is= ${lastName}`);
위 코드에서 ${firstName}과 ${lastName} 부분이 각각 변수에 담긴 실제 값으로 치환됩니다. \n은 줄 바꿈 문자로, 출력 결과를 두 줄로 나누어 표시합니다.
실행 방법
Node.js 환경에서 위 프로그램을 실행하려면 터미널에서 다음 명령어를 입력합니다.
node fileName.js
여기서는 파일 이름이 demo320.js라고 가정하겠습니다.
출력 결과
위 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.
PS C:\Users\Amit\javascript-code> node demo320.js First Name is= John Last Name is= Smith
정리
템플릿 리터럴이 작동하지 않는다면 다음 사항을 확인해 보세요.
- 백틱(`) 사용 여부: 키보드에서 숫자 1 왼쪽에 있는 백틱 키(또는 ~ 키를 Shift 없이)를 사용해야 합니다.
- ${} 구문 확인: 변수 보간 시 달러 기호($) 뒤에 중괄호({})를 함께 사용해야 하며, 중괄호 안에는 유효한 JavaScript 표현식이 들어가야 합니다.
- 실행 환경: 매우 오래된 브라우저나 Node.js 버전은 ES6 문법을 지원하지 않을 수 있으므로, 최신 버전으로 업데이트하는 것이 좋습니다.
이 세 가지만 점검하면 대부분의 템플릿 리터럴 관련 문제를 손쉽게 해결할 수 있습니다.