Template Literals?

템플릿 리터럴(Template Literals)은 내장된 표현식을 허용하는 문자열 리터럴이다. 우리는 보통 문자열을 사용할때 '', "" 를 사용해 묶어서 사용하였는데, 가끔가다 HTML과 데이터를 결합해서 DOM을 다시 그려야하는 일이 빈번해지기 때문에 추가된 기능이다

'string text line 1' = 기존
'string text line 2' = 기존

`string text line ${one}` = 템플릿 리터럴
`string text line ${two}` = 템플릿 리터럴

위와 같이 템플릿 리터럴은 작은 따옴표나 큰 따옴표 대신 백틱(`)으로 감싸준다

1. 표현식 삽입법

let a = 20;
let b = 10;
let c = '템플릿 리터럴';

let str = `저는 ${a+b}살이고, ${c}를 좋아합니다`

2. Multi-line strings

console.log("string text line\n" + "string text line2");
// 일반적인 방식

console.log(`string text line 1
strnig text line2`);
// 템플릿 리터럴 방식

3. Tagged templates

let person = 'Kim';
let age = 33;

let tag = function(strings, personExp, ageExp) {
	let str0 = strings[0];
    let str1 = strings[1];
    
    console.log("str0 : " + str0);
    console.log("str1 : " + str1);
    
    let ageStr;
    if(ageExp > 99) ageStr = 'centenaian';
    else ageStr = 'youngster'
    
    return str0 + personExp + str1 + ageStr;
};

let output = tag`that ${person} is a ${age}`;
console.log(output)

위와 같이 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있다

const list = [
	{
    	name: '철수',
        items: ['가방', '연필', '신발']
    },
    {
    	name: '영희',
        item: ['공책', '볼펜', '머리끈']
    }
]

console.log(`${list[0].name}는(은) ${list[0],items}를 가지고있습니다`)
//철수는(은) 가방, 연필, 신발을 가지고 있습니다