Javascript ES6 Tagged Template literals

// Template 처리
const data = [
    {
        name : 'Coffe-Bean',
        order : true,
        items : ['americano', 'milk', 'green-tea']
    },
    {
        name : 'Starbucks',
        order : false
    },
    {
        name : 'TwoSome',
        order : true,
        items : ['Ice-americano', 'Cake', 'Moka']
    }
]

// JSON 응답 받고, javascript object로 변환 후 데이터 처리
// dom에 추가

function fn(tags, name, items){
    
    console.log(tags); //0: "<div> Welcome " 1: " !! <div>↵<h2>주문가능항목</h2><div>" 2: "</div>"

    console.log(name); //Coffe-Bean

    console.log(items); // ["americano", "milk", "green-tea"]

    if (typeof items === 'undefined') {
        items = "주문가능한 상품 X";
    }
    return (tags[0] + name + tags[1] + items + tags[2]);
}



data.forEach((v) => {

    // *** 숫자 1 왼쪽에 있는 ` 사용
    let template = fn`<div> Welcome ${v.name} !! <div>
    <h2>주문가능항목</h2><div>${v.items}</div>`;
    console.log(template);
    
    /*
    	결과
        
        <div> Welcome Coffe-Bean !! <div>
    	<h2>주문가능항목</h2><div>americano,milk,green-tea</div>
        
        <div> Welcome Starbucks !! <div>
    	<h2>주문가능항목</h2><div>주문가능한 상품 X</div>
        
        <div> Welcome TwoSome !! <div>
    	<h2>주문가능항목</h2><div>Ice-americano,Cake,Moka</div>
    
    */
    
    
})

 

기존에  " " 또는  ' ' 안에 넣어서 했던 방식보다  ` ` 방식이 값을 대입해서 HTML에 표현하기 더 편한듯 함

 

fn "    "  --> X 

fn '     ' --> X

fn `    ` --> O