[JavaScript] 자바스크립트 템플릿 리터럴(Template Literal) - 백틱(`), ${ }을 이용한 문자열 표기법

템플릿 리터럴 (Template literal)

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다.
익숙해지면 굉장히 편리한 문법이다.

---

📝 템플릿 리터럴 형태

• 이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다.
• 변수나 표현식은 $와 중괄호를 통해 표기한다.
• ${var}  ${a + b}

---

여러 줄 표현 (multi-line string)

- 기존 따옴표를 사용하여 문자열에서 개행을 표현하려면, \n 과 같은 개행문자를 사용했었다.
- 템플릿 리터럴을 사용할 경우, 

   개행을 코드상에서 수행하면 별도의 개행문자 없이 개행을 표현할 수 있다.

// 기존
const quote = 'line1 \n line2 \n line3';

// 템플릿 리터럴로 이렇게도 사용 가능하지만,
const template1 = `line1 \n line2 \n line3`;

// 템플릿 리터럴 내에서 개행을 사용할 수 있다.
const template = `line1
                line2
                line3`;

---

표현식 삽입 (expression interpolation)

- ${} 를 사용하여 템플릿 리터럴 사이에 표현식을 넣을 수 있다.

// 기존 문자열
const a = 1;
const b = 2;
const quotes = a + ' + ' + b + ' = ' + (a + b) + ' 이다. ';

// template literals
const template = `${a} + ${b} = ${a + b} 이다. `;

// Output
1 + 2 = 3 이다.

---

중첩 표현식 (nesting templates)

- 특정 조건을 만족하는 경우마다 다른 문자열을 변수에 저장하고 싶을 때 사용

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;