1. Template Literal

<aside> 💡 Syntax: 문자열, 문자열 ${표현식} 문자열, tag문자열 ${표현식} 문자열

</aside>

Template Literal은 문자열 처리를 위한 리터럴로써 표현식을 포함할 수 있습니다. 기존에 우리가 문자열 사이에 동적으로 변경될 변수값을 넣어야 한다고 하면 '오늘의 날짜는' + today + 입니다.이런식으로+` 연산으로 문자열 결합을 해야했습니다. 하지만, Template Literal 을 통해 표현식이 포함된 문자열처리를 한 번에 할 수있게 됩니다.

또한, 함수를 호출하며 Template Literal을 바로 파라미터로 넣어줄수도 있는데 템플릿 안의 표현식이 있다면 평가가 된 결과가 파라미터로 넘어가게 됩니다.

console.log(`ABC`);
const one = 1, two = 2;
const result = `1 +2는 ${one + two}이 된다.`;
console.log(result);
console.log(`1 +2는\\n ${one + two}이 된다.`);

[실행 결과]

ABC

1 + 2는 3이 된다.

1 +2는 3이 된다.

2. tagged Template

템플릿에 함수 이름을 작성한 형태를 tagged Template라 하는데 여기서 호출되는 함수를 태그함수(tag function)이라 부릅니다.

1. Template에서 문자열과 표현식을 분리합니다.

2. "1 + 2 = "가 문자열, ${one + two}가 표현식이며 평가결과는 3입니다.

3. show()함수를 호출합니다.

4. 문자열을 배열로 넘겨줍니다. 좌측→우측으로 배열 엘리먼트로 추가하며 마지막 빈 문자열을 엘리먼트로 추가합니다.

   → 빈 문자열은 템플릿에서 자동으로 넘겨준 값입니다.

5. 표현식의 평가 결과를 넘겨줍니다.

   → show(["1 + 2 =", ""], 3)과 같습니다.

const one = 1, two = 2;
const show = (text, value) =>{
	console.log(`${text[0]}${value}`);
	console.log(text[1]);
};
show `1 + 2 = ${one + two}`;

[실행 결과]

1 + 2 = 3

""

그렇다면, show 함수를 호출 할 때 표현식이 하나가 아니라 다수라면 어떻게 구현을 해야할까요? 위 예제처럼 간단한 템플릿이 아닌 조금 더 복잡한 템플릿일 경우에는 태그 함수에 대응하는 파라미터 이름을 작성해야 합니다.

const one = 1, two = 2;
const show = (text, plus, minus) =>{
	console.log(`${text[0]}${plus}`); // 1 + 2 = 3
	console.log(`${text[1]}${minus}`);//이고 1-2=-1
	console.log(`${text[2]}${text[3]}`);//이다undefined
};
show `1 + 2 = ${one + two}이고 1-2는${one-two}입니다.`;

• show 1 + 2 = ${one + two}이고 1-2는${one-two}입니다.;

  ⇒ 위 템플릿은 템플릿을 기준으로 문자열은 표현식을 기준으로 split되어 배열이되고, 표현식은 각각이 하나씩 들어가게 됩니다. 해당 템플릿은 ["1 + 2 =", "이고 1-2는", "입니다"]이라는 배열 파라미터 하나와 ${one + two}의 평가 결과인 3과 ${one-two}의 평가결과인 -1이 전달되어 최종적으로 show( ["1 + 2 =", "이고 1-2는", "입니다", ""], 3, -1)이 됩니다.

  더하여 템플릿의 끝에 문자열이 있으면 빈 문자열을 설정하지 않습니다.

여기서 한 걸음 더 나아가 Rest파라미터를 사용하면 템플릿의 표현식을 좀 더 유연하게 받을 수 있습니다.

const one = 1, two = 2;
const show = (text, ...rest) =>{
	console.log(`${text[0]}${rest[0]}`); // 1 + 2 = 3
	console.log(`${text[1]}${rest[1]}${text[2]}`);//이고 1-2=-1입니다.
};
show `1 + 2 = ${one + two}이고 1-2는${one-two}입니다.`;

• const show = (text, ...rest)

  ⇒ rest 파라미터는 [3, -1]입니다.