템플릿 리터럴 — 백틱과 변수 삽입

이 토픽을 마치면

백틱과 ${} 문법으로 문자열을 깔끔하게 만드는 방법을 알게 됩니다.

따옴표의 한계

javascript

const name = "Alice";
const age = 25;
const msg = "Hello, " + name + "! You are " + age + " years old.";

문자열 중간에 변수를 넣으려면 +로 이어붙여야 합니다. 변수가 많아지면 따옴표 열고 닫고 더하기 넣고... 읽기도 쓰기도 불편합니다.

백틱과 $

javascript

const name = "Alice";
const age = 25;
const msg = `Hello, ${name}! You are ${age} years old.`;

백틱(`)으로 감싸고 ${}안에 변수를 넣으면 됩니다. 따옴표 + 더하기 조합이 사라집니다. 이걸 **템플릿 리터럴(Template Literal)**이라고 합니다. ES6(2015)에서 추가됐습니다.

${} 안에는 변수뿐 아니라 표현식도 들어갑니다:

javascript

const price = 15000;
const quantity = 3;
console.log(`Total: ${price * quantity}won`);
// Total: 45000won

console.log(`Status: ${age >= 18 ? "adult" : "minor"}`);
// Status: adult

함수 호출도 됩니다:

javascript

console.log(`Upper: ${name.toUpperCase()}`);
// Upper: ALICE

여러 줄 문자열

일반 따옴표로 여러 줄 문자열을 만들려면 \n을 넣어야 합니다:

javascript

const old = "Line 1\nLine 2\nLine 3";

백틱은 줄바꿈을 그대로 인식합니다:

javascript

const html = `
<div>
  <h1>${title}</h1>
  <p>${content}</p>
</div>
`;

HTML 템플릿을 만들 때 특히 유용합니다. 들여쓰기도 그대로 유지됩니다.

핵심

템플릿 리터럴은 **백틱과 ${}**으로 문자열에 변수와 표현식을 삽입하는 문법입니다. 문자열 연결(+)보다 읽기 쉽고, 여러 줄 문자열도 자연스럽게 지원합니다.