[JavaScript] 템플릿 리터럴 (Template literals)

Template literals (템플릿 리터럴)

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.

이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다.

익숙해지면 굉장히 편리한 문법이다!

 

핵심 기능

• 여러 줄 표현
• 문자열에 변수, 표현식 삽입

 

사용 방법

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

 

여러 줄 표현

normal strings

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

 

[ES6] template literals

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

 

표현식 삽입

normal strings

var a = 5;
var b = 10;

console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

 

[ES6]template literals

var a = 5;
var b = 10;

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

 

중첩 표현식

normal strings

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

 

[ES6] template literals without nesting

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

 

[ES6] nested template literals

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

 

참조

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals