[Javascript] 템플릿 리터럴(Template Literals)

Template literals

템플릿 리터럴은 ES6부터 새로 도입된 문자열 표기법으로

내장된 표현식을 허용하는 문자열입니다.

(ES6 사양 명세에는 template strings라고 되어있으며, 템플릿 리터럴과 같은 의미)

 

사용방법

템플릿 리터럴은 따옴표 대신 백틱( ` )을 사용합니다.

$와 중괄호를 사용해 ${expression} 와 같이 표현식을 사용합니다.

템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러시를 넣으면 됩니다. (`\`` === "`")

 

줄바꿈 (Multi-line strings)

\n, \t 등 이스케이프 시퀀스 없이 표현 가능.

템플릿 리터럴 안의 줄바꿈, 탭 등은 그대로 출력

ES5

console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

ES6

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

 

표현식 삽입법 (Expression interpolation)

문자열 안에서 변수 값을 사용할 경우 + 연산이 아닌 리터럴 문법을 사용합니다.

${val} 와 같이 ${ } 사이에 변수나 연산을 입력합니다.

ES5

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

ES6

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."