[JavaScript] Template literal

1)  json으로 응답 받고, javascript object로 변환 ->  데이터처리 조작 -> Dom에 추가
데이터 + HTML 문자열의 결합이 필요하기 때문에

const data = [
    {
        name: 'coffee-bean',
        order : true,
        items: ['americano', 'milk', 'green-tea']
    },
    {
        name: 'starbucks',
        order : false,
    }
]

// backtick을 사용
const template = `<div>Welcome ${data[0].name}!!</div>`
console.log(template);

 

2) Tagged Template literals

-> ${} : template으로 지정한 문자열

- 함수이름`(template)`

const data = [
	{
    	name: 'coffee-bean',
        order : true,
        items : ['americano', 'milk','green-tea']
    },
    {
    	name : 'starbucks',
        order : false,
    }
]

// backtick을 사용한다.
//tags, name, items = 배열, 첫 번째 template literal, 두 번째 template literal
function func(tags, name, items) {
	if (typeof items === "undefined") {
    	items = "<span style='color:red'>주문가능한 상품이 없습니다</span>";
    };
    return (tags[0] + name + tags[1] + items + tags[2])
}

const template = func`<h2>Welcome ${data[1].name}!!</h2>
<h4>주문 가능 항목</h4><div>${data[1].items}</div>`

console.log(template)
//결과 : <div>Welcome starbucks!!</div>
// <h2> 주문 가능 항목 </h2> <div> 주문가능한 상품이 없습니다 </div>

여기서 tags = ['<div>Welcome',

' !!</div> \n <h2>주문 가능항목</h2><div>',

'</div>']

- forEach를 이용해서 template을 만들고 innerHTML로 html에 넣기

const data = [
    {
        name: 'coffee-bean',
        order : true,
        items: ['americano', 'milk', 'green-tea']
    },
    {
        name: 'starbucks',
        order : false,
    }
]
function func(tags, name, items) {
    if (typeof items === "undefined"){
        //items = "주문가능한 상품이 없습니다";
        items = "<span style='color:red'>주문가능한 상품이 없습니다</span>";
    }
    return (tags[0] + name + tags[1] + items + tags[2])
}

data.forEach((v) => {
	let template= func`<h2>Welcome ${v.name} !!</h2>
    <h4>주문 가능 항목</h4> <div>${v.items}</div>`
    document.querySelector('#message').innerHTML += template;
})

 

* Using functions and conditionals in srings

 

출처 : 모던 자바스크립트 개발을 위한 ES6강좌(inflearn)

https://gomakethings.com/template-literals-in-vanilla-js/