개발/JavaScript
자바스크립트 - 태그드 템플릿 리터럴 (Tagged Template Literals)
피로물든딸기
2021. 8. 20. 22:52
반응형
태그드 템플릿 리터럴을 이용하면, 템플릿 리터럴의 표현식을 분해할 수 있다.
다음과 같은 literal이 있다면, ABC, EFG, HIJ(,+ "")와 value1, value2, value3로 분해한다.
`ABC${value1}EFG${value2}HIJ${value3}`
아래의 taggedTemplateLiterals의 str과 rest를 console로 출력해보자.
taggedTemplateLiterals 뒤에 literal을 붙여주면 실행된다.
function taggedTemplateLiterals(str, ...rest) {
console.log(str);
console.log(rest);
return 0;
}
let value1 = 10;
let value2 = "ten";
let value3 = false;
const result = taggedTemplateLiterals`ABC${value1}EFG${value2}HIJ${value3}`;
console.log({ result });
str에 리터럴로 분해된 문자열이 담겨있고, rest에 value1~3이 담겨있는 것을 확인할 수 있다.
또한 str의 length는 rest의 length보다 항상 1 크다.
str의 마지막에 값이 없더라도 빈 문자열이 들어가기 때문이다.
그리고 아래와 같이 arrow function으로도 작성 가능하다.
const arrowTaggedTemplateLiterals = (str, ...rest) => {
console.log(str);
console.log(rest);
return 0;
}
let value1 = 10;
let value2 = "ten";
let value3 = false;
const result = arrowTaggedTemplateLiterals`ABC${value1}EFG${value2}HIJ${value3}`;
console.log({ result });
반응형