[ES6] 템플릿 표현식

템플릿 표현식

자바스크립트는 코드를 쓸 때 문자열, HTML 등과 같이 쓰면, 보기에도 쓰기에도 불편하다. 예를 들면,

let a = 1, b = 2, c = 3;

let sentenceWithVar = 'a = ' + a + ', b = ' + b + ', c = ' + c + '\n';

console.log(sentenceWithVar); // a = 1, b = 2, c = 3 

문자열(HTML) 부분과 변수 부분을 따옴표로 하나하나 나누고 ' + ' 기호로 다 붙여주어야 한다. 그래서 ES6에서 나온 해결책이 템플릿 표현식이다.

ES6에서는 역따옴표( ` )로 이를 간단히 표현할 수 있다.

let a = 1, b = 2, c = 3;

let sentenceWithVar = `a = ${a}, b = ${b}, c = ${c}\n`;   // \n : 개행 특수문자

console.log(sentenceWithVar); // "a = 1, b = 2, c= 3"

let num1 = 1, num2 = 2;

let text  = `${num1}과 ${num2}를 더하면 ${num1 + num2}입니다.`;

console.log(text); // "1과 2를 더하면 3입니다."