템플릿 리터럴 심화! 태그드 vs 언태그드 차이점

태그드 탬플릿 이란?

• 태그 함수를 사용하여 템플릿 리터럴을 커스터마이즈할 수 있다.
• 백틱 앞에 함수 이름(태그 함수)을 붙여서 템플릿 리터럴을 처리한다.
• 태그함수는 템플릿 리터럴을 입력받아 직접 조작하거나 결과를 반환한다.

문법

tagFunction`문자열 템플릿`;

 

예제

function myTag(strings, ...values) {
  console.log(strings); // 문자열 배열
  console.log(values);  // 삽입된 값들
  return "Processed Template";
}

const name = "Alice";
const age = 30;

const result = myTag`My name is ${name}, and I am ${age} years old.`;
console.log(result);
// 출력:
// ["My name is ", ", and I am ", " years old."]  // strings
// ["Alice", 30]                                // values
// "Processed Template"                         // 최종 반환값

 

태그드 템플릿 활용

function highlight(strings, ...values) {
  return strings.reduce((prev, curr, i) => `${prev}<b>${values[i - 1] || ""}</b>${curr}`);
}

const name = "철수";
console.log(highlight`${name}입니다.`); 
// 출력: "<b>철수</b>입니다."

 

이렇게 하면 ${} 부분을 <b>태그로 감싸는 기능도 만들 수 있다.

 

---

 

언태그드 템플릿과 태그드 템플릿 비교

 

1. 언태그드 템플릿 리터럴(기본적인 ${} 사용)

const name = "철수";
console.log(`${name}입니다.`); 
// 출력: "철수입니다."

• 그냥 문자열을 합칠 때 쓰는 템플릿 리터럴이다.
• ${} 안에 변수를 넣으면 값이 삽입된다.

 

2. 태그드 테플릿 리터럴(함수를 이용한 변형)

function myTag(strings, ...values) {
  console.log(strings); // ["", "입니다."]
  console.log(values); // ["철수"]
}

const name = "철수";
myTag`${name}입니다.`;

 

태그 함수 myTab가 실행되면서, 문자열과 변수값이 분리됨!

• string : 템플릿 리터럴엣 변수 제외한 문자열 배열
• values : ${} 안에 들어가는 변수 값들

구분	언태그드 템플릿 리터럴	태그드 템플릿 리터럴
사용 방식	그냥 백틱(`)으로 작성	백틱 앞에 함수(태그 함수) 사용
결과	문자열 그대로 평가	태그 함수에서 문자열과 값들을 직접 처리 후 반환
사용 목적	간단한 문자열 생성	문자열 조작, 커스텀 로직 추가
예제	`${name}입니다.`	myTag`${name}입니다.`

 

 

정리

• 언태그드 템플릿 리터럴 = 그냥 ${}써서 문자열 합치기
• 태그드 템플릿 리터럴 = ${} 값을 가공하는 함수(myTag)를 붙여서 처리
• myTag는 원하는 이름으로 변경 가능