본문 바로가기
창고(2021년 이전)

[JS] 템플릿 리터럴 : `${}` - Template literals

by 측면삼각근 2019. 10. 25.
728x90
반응형

MDN

템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(` `)을 이용한다.

  • $
  • {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