[Javascript] ES6 템플릿 리터럴

ES6에서는 새로운 문자열 표기법인 템플릿 리터럴(Template Literal)을 도입했다.

기존 ES5는 문자열을 만들 때는 큰 따옴표("), 작은 따옴표(')를 사용해서 문자열을 만들었다.

var name = "Kim";
console.log("My name is " + name + ".");   // My name is Kim.

ES6의 템플릿 리터럴은 백틱( ` )기호를 사용해서 문자열을 더 간편하게 만들 수 있다.

문자열에 변수를 넣고 싶으면 ${변수}와 같이 쓰면 된다.

* 감싸진 문자열의 타입은 강제로 문자열이 된다.

위의 예제를 템플릿 리터럴로 바꿔보자

var name = "Kim";
var introduce = `My name is ${name}.`; 

console.log(typeof(introduce)); // string

console.log(introduce);        // My name is Kim.

심지어 연산자를 사용하지 않아도 되며 줄바꿈까지 허용한다.

큰 따옴표("")와 작은 따옴표('')도 섞어서 사용 가능하다.

console.log(`"줄바꿈"도
"허용"하는
'템플릿' "리터럴"`);

/* "줄바꿈"도
"허용"하는
'템플릿' "리터럴" */

마지막으로 innerHTML처럼 태그를 쉽게 삽입가능하다.

var tags = `<div><span>템플릿 리터럴</span></div>`;
console.log(tags)  // <div><span>템플릿 리터럴</span></div>