1. Template Literal이란?
- ES6에서 도입한 새로운 문자열 표기법으로 일반 문자열과 비슷해 보이나 (' ') 또는 (" ") 같은 통상적인 따옴표 대신 BackTick을 사용한다.
const template = `template literal은 backtick을 사용한다.`;
console.log(template);
2. Template Literal 예시
- 일반적인 문자열에서 줄바꿈은 허용되지 않으면 공백 표현을 위해 ()로 시작하는 Escape Sequence를 사용해야 한다. 하지만 Template literal은 여러 줄에 걸쳐 문자열을 작성할 수 있으며, Template Literal 내의 모든 공백은 그대로 적용된다.
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>`;
console.log(template);
- Template Literal은 (+)연산자를 사용하지 않아도 간단하게 새로운 문자열을 삽입할 수 있는 기능인 String Interpolation을 제공한다. String Interpolation은 ${ }로 표현식을 감싸며 ${ }내의 표현식은 타입이 문자열로 강제 변환된다.
const first = 'Tae-jin';
const last = 'Park';
//ES5 : 문자열 연결
console.log('My name is' + first + '' + last);
//ES6 : String Interpolation
console.log(`My name is ${first} ${last}`);