[JS][ES6] Template 처리

Template 처리

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

const template = `welcome ${data[0].name} !!`
console.log(template)
>> "welcome coffee-bean !!"

Tagged Template literals

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

const template = fn`<div>welcome ${data[0].name} !!</div>
<h2>주문가능항목</h2><div>${data[1].items}</div>`;

console.log(template);

>>"<div>welcome coffee-bean !!</div>
    <h2>주문가능항목</h2><div>주문가능한 상품이 없습니다.</div>"