ES6. Template(`) 백틱 tagged template literals

템플릿 리터럴

` 백틱을 이용해 표현식을 넣을 수 있다.

• muilti-line string 표현이 쉬움
  \n을 사용하지 않아도 엔터로 개행이 인식됨
• 따옴표와 이중 따옴표를 문자열로 표현하기 쉬움
• 문자열과 변수를 함께 쓰기 쉬움
• json과 같은 문자열을 dom과 함께 섞어 쓸 때 편함

 

형태

`${표현식}` 

 

 

문자열과 변수를 같이 사용할 때 편리

const hello = 'hello';

//es6 이전
console.log(hello + ' world');

//es6 이후
console.log(`${hello} world`);

var str = "'hello js'" + ' "안녕 자바스크립트!"';
let str2 = `'hello js' "안녕 자바스크립트!"`;

console.log(str);		//'hello js' "안녕 자바스크립트!"
console.log(str2);	//'hello js' "안녕 자바스크립트!"

 

html와 data를 같이 사용할 때 `백틱 템플릿을 사용하면 쉽게 data를 처리할 수 있다.