템플릿 리터럴(Template Literals)

템플릿 리터럴(Template literals)은 ES6에서 도입된 새로운 문자열 표기법으로, 백틱(`)을 사용한다.

템플릿 리터럴은 일반적인 문자열과 달리 이스케이프 시퀀스를 사용하지 않아도 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.

// 일반적인 문자열
const common = '<ul class="nav-items">\n\
  <li><a href="#home">Home</a></li>\n\
  <li><a href="#news">News</a></li>\n\
  <li><a href="#contact">Contact</a></li>\n\
  <li><a href="#about">About</a></li>\n\
</ul>';

// 템플릿 리터럴
const template = `<ul class="nav-items">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

템플릿 리터럴을 + 연산자를 사용하지 않아도 표현식을 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(${ … })이라 한다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.

const template = "template";

console.log("This string is not made by " + template + " " + "literals");
// "This string is not made by template literals"

console.log(`This string is made by ${template} literals`);
// "This string is made by template literals"

참고

• https://poiemaweb.com/es6-template-literals