template literals

template literal

template literal은 변수를 이용해 동적으로 문자열을 생성할 수 있는 문법이다.

//template literal 미사용
var day = 5;
var time = '10pm';
var mag = '날짜: ' + day + '시간: ' + time; // 기존의 방식을 사용하면 반복되는 따옴표('')와 + 기호를 반복적으로 입력하느라 코드를 작성하는 시간이 오래걸릴뿐더러 가독성도 좋지 않다.

//template literal 사용
var day = 5;
var time = '10pm';
var mag = `날짜: ${day}시간: ${time}`; //따옴표대신 백틱(`` 탭위에있음)을 사용한다.

Nesting Templates (중첩 템플릿)

template literal은 중첩이 가능하다.

// template literal 미사용
var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

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

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