ES 6 - Template literals

 

이건 아주 간단한 개념!

 

예제로 바로 보는게 이해하기 더 빠를 것 같다.

 

ES5에서는 아래와 같이 구현했어야 했던 코드를

var myAge = 28;

console.log("저는 " + myAge + "세 입니다.");
// "저는 28세 입니다."

 

ES6에서는 이렇게 구현할 수 있다는 것!

var myAge = 28;

console.log(`저는 ${myAge}세 입니다.`);
// "저는 28세 입니다."

 

여기서 백틱 ( ` )과 ${} 이 기호를 활용한다는 것이 포인트다.

 

 

백틱은 키보드의 ~ 키에 함께 있다.

이걸 사용할 때  백틱이 나오지 않아 고생한 적이 있는데 내 노트북에서만 그런 것인지는 모르겠지만

한글로 쓰다가 이 키를 누르면 ₩ 이렇게 나온다는 것..

영어로 전환한 후 이 키를 눌러줘야 ` 이렇게 쓸 수 있다 ㅠㅠ

이렇게 간단한 걸로 나처럼 시간 낭비하는 사람이 없기를 바라며 기록해본다.

 

 

Template literals 의 꿀팁은?

=> 줄바꿈이 가능하다는 점!

var myAge = 28;

console.log(`저는
${myAge} 세 입니다.`);
// "저는
// 28세 입니다."

바로 이렇게!