[JS/ES6] template, tagged template literals

template

const string1 = b + ', my ' + a + ' ' + object.c;

처럼 문자열과 변수를 + 를 이용해 잇는 것을 조금 더 편하게 하기 위해

const string2 = `${b}, my ${a} ${object.c}`;

이렇게 jsp의 el태그처럼 생긴 것을 사용하는 방법이 template 입니다.

"", ''같은 따옴표가 아닌, 백틱 이라는 `` 따옴표를 사용하여 그 안에 문자열과 ${변수} 를 담습니다.

      const a = 3;

      const b = 'hi';

      const object = {

        c: 'friends'

      }

      const string1 = b + ', my ' + a + ' ' + object.c;

      const string2 = `${b}, my ${a} ${object.c}`;

      console.log(string1);

      console.log(string2);

string1은 일반적으로 사용하던 방식이고 string2는 template 방식을 써서 조금 더 직관적이고 간단하게 표현할 수 있습니다. (결과는 같음)

tagged template literal

template 방식의 문자열에 들어있는 변수나 문자열들에 대해 필터를 입히는 역할, 특수한 문자열로 만드는 역할을 하는 것이 tag 입니다.

      const data = [

        {

          name : 'starbucks',

          order : true,

          items : ['americano', 'milk', 'green-tea']

        },

        {

          name : 'ediya',

          order : false

        },

        {

          name : 'coffee-King',

          order : true,

          items : ['strawberry latte', 'cold brew']

        }

      ];

      function fn(tags, name, items) {

        if(typeof items === 'undefined') {

          items = "<span style='color:pink;'>주문 가능한 상품이 없습니다.</span>";

        }

        return (tags[0] + name + tags[1] + items + tags[2]);

      }

      const template = fn`<div>welcome ${data[1].name} !! </div>

          <h2>주문가능항목</h2><div></div>${data[1].items}</div>`;

      

      console.log(template);

앞 예제에서는 단순히 백틱 문자만 사용해 template 문자열을 만들었습니다.

이번 예제에서는 앞에 fn태그가 붙고 뒤에 template 문자열을 붙였습니다.

fn태그를 사용하기위해 fn 함수를 만들어야 합니다.

함수에 들어오는 매개변수인

tags는 template문자열에서 ${} 사이로 나눠진 문자열들이 배열로 들어옵니다.

name, items 매개변수는 ${} 값들이 순서대로 들어옵니다.

(data[0]의 tags, items 의 로그를 확인한 경우)

fn에서는 items의 값이 없을 때 items를 "<span style='color:pink;'>주문 가능한 상품이 없습니다.</span>" 으로 바꿔서 리턴해주는 함수입니다.

마지막 콘솔에서 template를 출력해보면 이렇게 <span>으로 감싸져있는 문자열이 items의 undefined 대신 출력되는 것을 확인할 수 있습니다.

forEach문을 써서 3개의 data값을 html상에 출력해보겠습니다.

      data.forEach((v) => {

        let template2 = fn`<div>welcome ${v.name} !! </div>

          <h2>주문가능항목</h2><div>${v.items}</div><hr />`;

          document.querySelector("#message").innerHTML += template2;

      })

items가 없을 경우 이렇게 fn의 tag를 거쳐서 원하는대로 이쁘게 출력됩니다.