728x90
반응형
템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(` `)을 이용한다.
- $
- {expression}
이용 표현식을 넣을 수 있다. 탬플릿 리터럴 안에서 백틱의 백틱을 벗어나려면 백틱 앞에 백슬러쉬를 넣으면된다.
`\`` === "`" // true
Multi-line strings
console.log ("string text line 1\n"+ "string text line 2");
// "string text line 1
// string text line 2"
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
표현식 삽입법 - Expression interpolation
//normal strings
var a = 5;
var b = 10;
console.log("Fi"Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."
//template literals
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
중첩된 템플릿 - Nesting templates
//In ES5
var classes = 'header'
classes += (isLargeScreen() ?
'' : item.isCollapsed ?
' icon-expander' : ' icon-collapser');
//ES2015 에서 중첩이 없는 경우
const classes = `header ${ isLargeScreen() ? '' :
(item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
//ES2015 에서 중첩된 템플릿 리터럴을 사용한 경우
const classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
태그를 이용한 탬플릿 - tagged templates
태그를 사용하면 템플릿 리터럴을 함수로 파싱할수 있다!
var person = 'Mike';
var age = 28;
funciton myTag(strings, personExp, ageExp){
var str0 = strings[0]; // "that"
var str1 = strings[1]; // "is a "
var ageStr;
if(ageExp > 99){
ageStr = 'centenarian';
} else {
ageStr = 'youngster';
}
return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ person } is a ${ age }`;
console.log(output);
//that Mike is a youngster;
function template(strings, ...keys){
return (function(...values){
var dict = values[values.length -1] || {};
var result = [strings[0]];
keys.forEach(function(key, i){
var value = Number.isInterger(key) ? values[key] : dict[key];
result.push(values, strings[i + i]);
)};
return result.join('');
}
}
var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A'); // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'}); // "Hello World!"
Raw strings
function tag(strings) {
console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'
※cf - raw string을 생성하기 위한 String.raw() method가 존재함
var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
str.length;
// 6
str.split('').join(',');
// "H,i,\,n,5,!"
반응형
'창고(2021년 이전)' 카테고리의 다른 글
[CSS Rendering] 배경설명, 고전레이아웃 (0) | 2019.10.27 |
---|---|
[JS] Console (0) | 2019.10.25 |
[JS] 화살표 함수 => Fat Arrow Function (0) | 2019.10.25 |
[JS] 함수메소드(Function Methods) (0) | 2019.10.13 |
[JS] 비동기 호출 (0) | 2019.10.08 |