템플릿 리터럴(Template literal) 요약정리

1. 템플릿 리터럴은 작은따옴표와 큰따옴표 혼용이 가능하다

예) const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`;

2. 줄내림시 별도의 처리가 필요없다.

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);

3. +연산자를 사용하지않고 변수삽입이 쉽게 가능하며 ${expression} 안에는 자바스크립트 표현식도 가능하다.

const first = 'Ung-mo';

const last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`); // My name is Ung-mo Lee.

----------------------------------------------------------------------------------------------------------------------------

console.log(`1 + 1 = ${1 + 1}`); // 1 + 1 = 2

const name = 'ungmo';

console.log(`Hello ${name.toUpperCase()}`); // Hello UNGMO

출처 : https://poiemaweb.com/es6-template-literals