Javascript ES6부터 Template literals를 통해 문자열을 쉽게 다룰 수 있게 됐다.

const name = 'Name';

const str = `I'm ${name}`;

이런 Template literals는 많이 접할 수 있다.

하지만 Tagged templates는 실제로 사용할 기회가 많지 않다. 그래서 글로 한번 정리해보기로 했다.

Tagged templates

Tagged Template은 Template Literals의 발전된 형태라고 MDN 문서에서 소개된다.

아마 styled-components를 사용한다면 아래와 같은 형태의 코드를 작성했을 것이다.

const Button = styled.button`
  // styles
`;

이런 형태의 코드는 Tagged templates를 사용한 코드이다.

직접 styled.button 함수를 만들어 내부를 구경해보자.

function styledButton(styles) {
  console.log(styles); // ['\n  // styles\n']
}

styledButton`
  // styles
`;

직접 만든 styledButton 함수를 실제 styled.button과 같이 사용했다.

결과는 styledButton 함수 뒤의 백틱의 문자열이 배열의 0번째로 들어간 값이다.

그렇다면 실제 사용하는 것 처럼 만들어 보자

function styledButton(styles, color) {
  console.log(styles, color); //['\n  color: ', ';\n'] #ffffff
}

const white = '#ffffff';

styledButton`
  color: ${white};
`;

변경사항은 아래와 같다

• styledButton 함수에 color라는 매개변수를 추가
• 호출 시 color: ${white}; 와 같이 호출

결과는 ${white}를 기준으로 앞, 뒤 문자열이 각각 styles 매개변수의 0번째, 1번째 값으로 들어갔다.
또 ${white}의 white 변수의 값이 두번째 매개변수로 들어갔다.

이렇게 Tagged templates은 Template literals의 값을 매개변수로 받아 사용할 수 있는 기법이다.

날짜 format 해보기

날짜를 모두 format해주는 Tagged templates를 만들어보자.
(실제 구현보다 사용법에 초점을 맞췄기에 참고 바람)

function formatDateToOnlyMonth(baseString, ...datestrings) {
  return baseString
    .map(
      (str, index) =>
        `${str}${
          datestrings[index] ? new Date(datestrings[index]).getMonth() : ''
        }`
    )
    .join('');
}

const date1 = '2022-01-02';
const date2 = '2022-07-02';

const result = formatDateToOnlyMonth`Month1: ${date1}, Month2: ${date2}`;

console.log(result); // Month1: 0, Month2: 6

직접 구현할 일은 없을지 몰라도 알고 사용하는것과 모르고 사용하는것은 차이가 있다고 생각해서 한번쯤 살펴보면 좋겠다.