[JS] 템플릿 리터럴(Template literal)

템플릿 리터럴(Template literal)

: 자바스크립트에서 문자열을 입력하는 문자열 리터럴

• `백틱(back-tick)`으로 사용
• 문자열을 멀티 라인(여러 줄)으로 작성 가능 ⭕
• ${보간법} 사용 가능 ⭕
  
  • 변수, 표현식, 연산 등을 문자열 안에 삽입할 수 있다.

 

 

* 데이터 + 템플릿 리터럴을 이용한 마크업 String

// 데이터 객체
const koreanFoods = {
  caption: "한식 메뉴",
  rows: [
    { headline: "뚝배기 불고기", content: 8000 },
    { headline: "스팸치즈볶음밥", content: 7500 },
    { headline: "불고기낙지덮밥", content: 9000 },
  ],
};


// 마크업 렌더링 함수
function renderTableString(data) {
  const markup = /* html */ `
  <table class="table">
    <caption class="sr-only">${data.caption}</caption>
    ${data.rows.reduce(function (htmlString, rowItem) {
      return  htmlString + `
      <tr>
        <th>${rowItem.headline}</th>
        <td>${numberWithComma(rowItem.content)}원</td>
      </tr>`;
    }, "")}
  </table>
  `;

  return removeSpaceHTMLString(markup)
}


// 렌더링 함수에 데이터 넣는 함수
function run() {
  const renderedResult = renderTableString(koreanFoods);
  return renderedResult;
}

console.log(run());
// '<table class="table">
//      <caption class="sr-only">한식 메뉴</caption>
//        <tr>
//          <th>뚝배기 불고기</th>
//           <td>8,000원</td>
//        </tr>
//        <tr>
//          <th>스팸치즈볶음밥</th>
//           <td>7,500원</td>
//        </tr>
//        <tr>
//          <th>불고기낙지덮밥</th>
//           <td>9,000원</td>
//        </tr>
//	</table>'

 

 

---

 

 

Template literals - JavaScript | MDN