템플릿리터럴

ES6부터 도입된 새로운 문자열 표기법.

일반 문자열과는 다르게 '', "" 대신 ``(백 틱)을 사용한다.

일반 문자열에서는 줄 바꿈이나 공백 등을 표현하려면 (백 슬래시)를 이용한 이스케이프 시퀀스를 사용한다.

 

ex) let template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';

 

템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄 바꿈과 공백이 있는 그대로 적용된다.

ex) let template = `<ul>
<li><a href="#">Home</a>
</ul>`;

 

표현식 삽입
일반 문자열은 문자열 연산자 + 를 통하여 연결한다.

ex) 
let first = 'YongJun'
let last = 'Choi'
'My name is' + first + ' ' + last + '.');

 

템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있다.

ex)
let first = 'YongJun'
let last = 'Choi'
`My name is ${first}${last}.`;
// 표현식을 삽입하려면 ${}으로 표현식을 감싼다.
`1+2 = ${1+2}` // 1+2 = 3

 

출처

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리