Templete literals

Templete Literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.
ES2015 사양명세서에선 template strings라고 불렸습니다.
템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다.

프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.)

Syntax

`string text`
`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸줍니다.
위 예시에서 템플릿 리터럴에서 제공하는 기능들을 사용해봤는데 하나하나 알아보도록 하겠습니다.

Expression interpolation (표현식 삽입법)

let a = 20;
let b = 8;
let c = "자바스크립트";
let str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;
console.log(str);   //저는 28살이고 자바스크립트를 좋아합니다.