템플릿 리터럴

우리는 동적인 문자열을 처리할 때 다음과 같은 형태를 많이 사용한다.

const userName = 'Mygumi';
const age = 20;
const output = `Hi, ${userName} and I am ${age}.`;

ES6 에서 새롭게 도입된 기능으로 템플릿 리터럴(Template Literals) 이라고 불린다.

백틱(`) 을 사용하여 문자열과 변수를 함께 사용할 수 있어 문자열 처리에 유용한 기능이다.

태그드 템플릿 리터럴

템플릿 리터럴의 발전된 형태로써, 함수 형태로 사용할 수 있다.

이 문법은 문자열에서 userName, age 와 같은 변수들과 "Hi," "and I am" 과 같은 정적인 문자열을 구분지을 수 있다.

여기서는 정적 데이터, 동적 데이터라고 구분 짓겠다.

첫번째 파라미터에는 정적 데이터가 저장되어 있고, 나머지 파라미터에는 동적 데이터가 저장되어 있는 모습을 볼 수 있다.

동적 데이터를 자세히 보면 age 값의 타입은 String 이 아닌 Number 형태로 타입이 유지된다.

function transform(staticData, ...dynamicData) {
  console.log(staticData); // ["Hi, ", " and I am ", "."]
  console.log(dynamicData); // ["Mygumi", 20]
}

transform`Hi, ${userName} and I am ${age}.`;

transform 함수를 일반적인 함수 호출 방식인 transform() 이 아닌 transform`` 형태인 것을 볼 수 있다.

첫번째 파라미터에는 정적 데이터가 저장되어 있고, 나머지 파라미터에는 동적 데이터가 저장됨.

아래 예제처럼 function으로 호출했다면 전달되는 파라미터는 단순 하나의 문자열인데 ``로 호출했을 때는 동적 데이터의 원래 타입이 유지된다.