템플릿 리터럴(template literals)이란 무엇인가요?

Question

Accepted Answer

**템플릿 리터럴**은 백틱(`` ` ``)을 사용하며, 일반 문자열 따옴표에 없는 두 가지를 추가합니다: 표현식의 **보간(interpolation)**과 **여러 줄** 문자열입니다. ```js const name = "Ann"; const count = 3; // 보간: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // 변수뿐 아니라 어떤 표현식이든 동작한다 const total = `Total: ${(count * 1.1).toFixed(2)}`; // 여러 줄 — 줄바꿈을 그대로 보존한다 const html = `

${name}

`; ``` 템플릿 리터럴 이전에는 `"Hi " + name + ", " + count + ...`처럼 작성해야 했습니다 — 장황하고 오류가 발생하기 쉽습니다. 보간이 훨씬 읽기 좋습니다. ## 태그드 템플릿(tagged templates) (심화) 백틱 앞에 놓인 함수는 문자열 조각들과 보간된 값들을 받아서 처리할 수 있습니다: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` 이는 **styled-components** 같은 라이브러리와 안전한 SQL/HTML 이스케이프 헬퍼의 기반이 됩니다. ## 왜 중요한가 템플릿 리터럴은 오늘날 문자열을 구성하는 표준 방식입니다 — 가독성 있는 보간, 손쉬운 여러 줄 텍스트, 그리고 DSL을 위한 훅(태그드 템플릿)을 제공합니다.