반응형
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'}` }`;
참조
반응형