가라멜의 달달한 세상 탐방

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

Template Literals | PoiemaWeb

이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로,

정확한 내용은 위의 출처에서 보는 것이 좋다.

 

 

템플릿 리터럴은 일반 문자열과 비슷해보이지만, ' 또는 " 같은 통상적인 따옴표 문자 대신 백틱문자 ` 를 사용한다.

ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.

const template = `<ul>
<li>~~~</li>
<li>2222</li>
</ul>`;

템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다.

이를 문자열 인터폴레이션 이라 한다.

const first = 'first';
const last = 'last';

//ES5
conosle.log('fl is ' + first + ' + last + '.');

//ES6
console.log(`fl is #{first} ${last}.`);