Tagged Templates

먼저 Template literals 이란 백틱 ` 을 이용해서 스트링을 표현하는 ES6 문법이다.

기본적으로 스트링은 큰/작은 따옴표를 사용해서 표현하는데, 이는 중간에 변수값이 들어가거나 텍스트가 길어져서 개행을 하고플땐

항상 + 로 연결해줘야하고 이는 일일이 + 로 나눠주어야 하는 매우 불편한 작업을 동반하게된다.

그러나 template literal 은 ` ` 안에 ${} 문을 사용해 스크립트 변수를 바인딩할 수 있고 개행도 그냥 엔터로 (실제개행) 인식하기 때문에 편리하다.

이 백틱 문법을 한층 더 고급스럽게 사용법하는 방법이 Tagged templates 이다.

Ex )

var person = 'ks';

var age = 19;

function myTag(strings, personExp, ageExp) {
    ...
    return ...
}

var output = myTag`that ${ person } is a ${ age }`;
console.log(output);

위처럼 myTag` ~~~ ` 이렇게 쓰면 정의해놓은 myTag 함수가 호출되고

첫번째 인자는 표현식을 제외한 스트링값의 배열, 두번째 인자는 표현식들이 쓰인만큼 나열 되는데 이를 아래처럼 rest 문법으로 나타낼 수도 있다.

function myTag(strings, ...exps) {
    ...
}

그리고 이 함수에서 원하는 형태의 값을 리턴해주는 식으로 사용한다. (Styled component 가 tagged templates 사용 예)

 

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN