[Javascript] ES6 Tagged Template

백틱(`) 문자열을 사용하면 멀티라인 문자열이나, 보간(${}, interpolation) 등을 처리할 수 있다는 것은 익히 알고 있을 것이다.

근데 의외의 기능이 하나 더 있는데, 바로 tagged template이라는 것이다.
이건 특수한 태그 함수를 정의해놓고, 백틱 템플릿 앞에 접두사처럼 달아서 문자열 조작을 할 수 있게 한다.
리액트의 css 관리모듈인 styled component에서 주로 사용된다.

태그 함수는 일단, 1개 이상의 인자를 받는다.
첫번째 인자는 받은 템플릿 텍스트의 분할된 배열이 던져진다. 분할기준은 보간이다.

그리고 태그 함수는 여기에 더해서 0개 이상의 가변인자를 받을 수 있다.
가변인자에는 보간 표현식이 순서대로 들어온다...

아 그리고 tag 함수가 뭘 반환하게 할지는 자유다. 보통은 문자열 처리 후에 처리된 문자열을 반환해서 쓰지만, 그래야만 하는 건 아니란 것이다.

그렇다.

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