let word=`witch`;
console.log(word);

// 여러 줄 문자열 예시
let word=`저는
김성현
입니다`;
console.log(word);

// 표현식 삽입
let myName="김성현"
let word=`저는 ${myName}입니다`;
console.log(word);

let word=`\` <- 이건 백틱입니다.`;
console.log(word);

태그함수명`템플릿 리터럴`

function tag(strings, arg1, arg2){
  console.log(strings, arg1, arg2);
}

let myName="김성현"
let myAge=25;

tag`저는 ${myName}이고 ${myAge}살입니다.`;

["저는 ", "이고 ", "살입니다"] "김성현" 25

function tag(strings, arg1){
  console.log(strings, arg1);
}

let myName="김성현"

tag`저는 ${myName}`;

let str = String.raw`Hi \n${myName}!`;
// 이스케이프 문자가 처리되지 않아 Hi \nwitch! 가 출력된다.
console.log(str);

const me={
  name:"Kim Sung Hyun",
  blog:"https://www.witch.work/"
}

function makeMarkUp({name, blog}){
  return `
    <div class="me">
      <h1>${name}</h1>
      <a href="${blog}">${blog}</a>
    </div>
  `;
}

console.log(makeMarkUp(me));

function templater(strings, ...keys){
  return function(data){
    // strings 복사본 만들기
    let temp = strings.slice();
    // 각 strings의 뒤에 오는 표현식(${}로 감싸였던 것)의 결과를 붙여 준다. 
    keys.forEach((key, idx)=>{
      temp[idx] = temp[idx] + data[key];
    });
    // 나눠진 문자열들을 붙여 준다.
    return temp.join('');
  }
}

const makeMarkUp = templater`
  <div class="me">
    <h1>${'name'}</h1>
    <a href="${'blog'}">${'blog'}</a>
  </div>
`;
console.log(makeMarkUp(me));

const costInfo={
	goods:"카페라떼",
  cost:4500,
}

const makeCostMarkUp = templater`
  <div class="cost">
    <h1>${'goods'}</h1>
    <h2>${'cost'}원</h2>
  </div>
`;

console.log(makeCostMarkUp(costInfo));