템플릿 리터럴(Template Literal)

ES6부터 새로운 문자열 표기법인 템플릿 리터럴 (template literal)이 도입되었다.

템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 문자와 변수를 함께 사용하여 편리한 문자열 처리기능을 제공한다.

템플릿 리터럴은 보통 따옴표가 아닌 백틱(``)을 사용한다.

일반 문자열 내에서는 공백이나 줄바꿈(개행)이 허용되지 않아 백슬래시('\')로 시작하는 이스케이프 시퀀스를 사용해야한다.
반면 템플릿 리터럴에서는 모든 공백이 그대로 적용된다.

let template = `<div>
Hello 
world
</div>`

console.log(template)

'<div>
Hello 
world
</div>'

또한 템플릿 리터럴 내에서는 표현식을 삽입하기 위해 ${}의 형태를 사용하면 된다.
(전통적 문자열에서는 +연산자로 문자열을 연결했다.)

let first = 'Gil-dong';
let last = 'Hong';

console.log(`My name is ${first} ${last}.`}
// My name is Gil-dong Hong.

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