템플릿 리터럴, 태그된 템플릿

템플릿 리터럴은 ES2015에 명세된 문법으로 표현식, 문자열 삽입, 태깅 등의 수행하는 문법입니다.

1. 기본 문법

기존 문법은 표현식 삽입법입니다. 기존 문법을 먼저 살펴보겠습니다.

 

var a = 10;
var b = 20;
var userName = "홍길동";
var userStr = "안녕하세요." + userName + "님, 당신은 " + (a + b) + "살 입니다.";

 

익숙하고 직관적인 방법이지만 복잡해지면 가독성이 떨어지는 문제가 있었습니다.

이에 새롭게 나온 문법이 템플릿 리터럴입니다.

 

const a = 10;
const b = 20;
const userName = "홍길동";
const userStr = `안녕하세요. ${userName}님, 당신은 ${a + b}살 입니다.`;

마찬가지로 직관적이면서 정적인 문자열과 변수가 들어가는 자리가 더 명확해져서 가독성이 더 좋아졌습니다.

또 템플릿 리터럴은 공백, 줄바꿈을 모두 반영하고, 따옴표도 사용할 수 있습니다. 이스케이프 시퀀스를 사용하지 않아도 됩니다.

다만 공백 줄바꿈을 원치 않을 경우는 trim 함수 등으로 직접 처리해줘야 한다는 단점이 있습니다.

주의할 점은 ' (아포스트로피) 가 아니라 `(백틱) 이라는 점입니다.

 

2. 템플릿 태그 (Tagged Templates)

템플릿 리터럴을 함수로 파싱하는 Tagged Templates 라는 문법도 추가되었습니다.

리액트를 다뤄보신 분들은 Styled Component로 접해보셨을 수도 있습니다.

 

const mainWrapper = styled.div`
	width: 90%;
	padding: 10%;
    ....
`;

 

여기서 div 는 함수입니다.

간단한 예제를 만들어보죠.

 

const whoAmI = "Iron man";
const consoleMessage = ( ...someMessage ) => console.log(someMessage);
consoleMessage`I am ${whoAmI}`;

 

 

 

const a = "유비";
const b = "조조";
const winner = b;

const tag = (strings) => {
  console.log(strings[0]);
  console.log(a);
  console.log(b);
  console.log(`${strings[0]} ${winner === a ? a : b}`);
}

const someStr = tag`Hello`;

간단하게 유동적인 값이 나오도록 태그한 함수입니다.