자바스크립트 - 태그드 템플릿 리터럴 (Tagged Template Literals)

자바스크립트 전체 링크

 

태그드 템플릿 리터럴을 이용하면, 템플릿 리터럴의 표현식을 분해할 수 있다.

 

다음과 같은 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 });