TIL 101 | Tagged Templates

Tagged Template Literals는 Template Literals를 이용하여 함수의 인자를 파싱하여 넘겨주는 것을 의미한다.

const lines = ["1", "2", "3"]

function buildHTML(strings, exprs) {
  const newHTML = exprs.map(function(expr){
    return `${strings[0]}${expr}${strings[1]}`
  });
  return newHTML;
}
const result = buildHTML`<li>${lines}</li>`;
console.log(result);
// ["<li>1</li>", "<li>2</li>", "<li>3</li>"]

문자열은 첫번째 파라미터의 배열로 들어가고, 나머지 변수 값은 각각 값이 대입된다. 변수는 여러개가 될 수도 있다.

const placeHTML = buildHTML`<li>${lines}</li>`;
placeHTML('#quotes');

function buildHTML (tags, lines) {
  return function (element) {
    const newHTML = lines.map(function(line){
      return `${tags[0]}${line}${tags[2]}`;
    });
    const finalHTML = newHTML.join('');
    document.querySelector(element).innerHTML += finalHTML;
  }
}

리액트 라이브러리인 styled-components 역시 Tagged Template를 사용한다.

function test() {
  return "World";
};

const templateLiteralCallback = `Hello ${() => test()}`
console.log(testCallback); // Hello () => test(); 그냥 스트링으로 출력

function taggedCallback(strings, func) {
  return strings[0] + func();
}

const taggedLiteralCallback = taggedCallback`Hello ${() => test()}`
console.log(taggedLiteralCallback); // Hello World