Template Literals

1. Template Literals이란?

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.

템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(``) (grave accent) 을 이용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다.

2) 문법 사용방법

문자열과 표현식

1. ES6전엔 변수와 문자열을 합쳐서 사용할 경우 아래와 같았다. 변수가 2개라 문제가 되지 않지만, 많을 경우 계속해서 +를 사용해야 했다.

   let name1 = "E";
   let name2 = name1 + "RESHUR";
   
   console.log(name2); // ERESHUR

2. ES6에서는 백틱`` 을 이용하여 아래와 같이 좀 더 쉽게 작성할 수 있다. ${변수}으로 작성하면 변수에 들어가는 값이 ${변수} 안에 치환된다.

   let name1 = "ERESHUR";
   let greeting = `Hello, ${name1}`;
   
   console.log(greeting); // 'Hello, ERESHUR'

3. 표현식 작성

   let yourmoney = 800;
   let mymoney = 900;
   
   console.log(`our money is ${yourmoney + mymoney}`); // 'our money is 1700'

2) 여러줄의 문자열 생성

1. ES6이전에는 여러줄을 사용하기 위해선 \ (backspace 아래에 위치)를 사용해야했다.

   let hello = "안녕하세요 \
   	      저는 seonghae 입니다.\
   	      만나서 반가워요! ";
   
   console.log(hello); // '안녕하세요 저는 seonghae 입니다.만나서 반가워요! '

2. 백틱 `` 을 사용했을땐 \ 없이 여러줄을 그대로 입력하면 된다.

   let hello = `안녕하세요 
               저는 seonghae 입니다.
               만나서 반가워요! `;
   
   console.log(hello); // '안녕하세요 저는 seonghae입니다.만나서 반가워요! '

💡 참고자료 / MDN