태그드 템플릿 리터럴(Tagged Template Literals)

태그드 템플릿 리터럴은 이름만 들어서는 이해가 어려울 수도 있습니다. 우선 템플릿 리터럴에 대해서 모르겠다면 ES6 템플릿 리터럴(Template literals) 에 관한 내용을 참고하도록 합니다.

태그드 템플릿 리터럴은 말 그대로 태그가 된(tagged) 템플릿 리터럴 이라고 할 수 있는데요. 템플릿 리터럴이 ES6에 도입되서 문자열을 다루는게 편해졌습니다. 거기서 한단계 더 나아가 템플릿 리터럴을 함수나 메소드와 함께 사용해서 더 복잡한 조작을 할 수 있게 됐습니다.

예제를 통해서 알아보겠습니다.

function tagScore(strings, score, name) {

    let grade;
    let say;

    if (score > 90) {
        grade = 'A';
    } else if (score > 80) {
        grade = 'B';
    } else if (score > 70) {
        grade = 'C';
    } else if (score > 60) {
        grade = 'D';
    } else {
        grade = 'F';
    }

    return strings[0] + grade + strings[1] + name + strings[2];
}

let theScore = 81;
let theName = 'Hansen';

let output = tagScore 
`your grade is [${theScore}]
Good job! [${theName}] 여기가 인덱스 2`;

console.log(output);

*실행결과:
your grade is [B]
Good job! [Hansen] 여기가 인덱스 2

tagScore`템플릿 리터럴` 과 같은 형식이 생소할 수 있는데요. 태그를 붙이면 실제로는 함수를 호출해서 이 문자열들과 변수($ 표시한)를 배열로 넘겨줍니다. 여기서는 첫번째 매개변수인 strings가 순수 문자열을 배열로 저장하고 나머지 변수에 대해서는 score, name이 순서데로 받습니다.

tagScore 함수에서 return 형식으로 문자열을 반환하는데 어떤 식으로 반환하건 상관없습니다. 인수로 받은 문자열들이나 변수들을 하나도 반환하지 않아도 됩니다. 위에서는 점수의 등급을 매겨놨는데 이런 것은 태그드 템플릿 리터럴(좀 길다…)이 아니라 함수로도 할 수 있는 일입니다. 그렇다면 장점은? 태그를 통해서 커스텀 포맷을 만들 수 있습니다.

이 포맷의 사용자들은 함수 내용을 몰라도 양식에 맞는 템플릿 리터럴만 넘겨주면 됩니다. 그밖에 어떤 문자열 조작이건 원하는 데로 가능합니다.

태그드 템플릿의 본질적인 원리는 인수를 배열 매개변수로 받는 것 입니다. function f(strings, …args) 에서 문자열은 strings배열로 들어가고, 변수들은 args배열로 갑니다. 이 때 strings는 마지막 부분에 빈문자(empty character)가 들어갑니다. 그렇게 짤리도록 되어 있습니다.

// 태그드 템플릿 리터럴

let var1 = 'number';
let var2 = 99;

let myTemplate1 = f`my favorite ${var1} is ${var2}`;
console.log(myTemplate1);

function f(strings, ...args){

    // 배열로 저장된다.
    console.log(strings);
    console.log(args);
    
    return strings[1] + strings[0] + args[0] + ' ' + args[1] + '?';
}

*실행결과:

(3) ['my favorite ', ' is ', '', raw: Array(3)]
(2) ['number', 99]
is my favorite number 99?

배열로 받은 요소들에 어떤 처리를 할건가는 프로그래머의 몫입니다.

String.raw

String.raw의 형식을 보면 태그드 템플릿 리터럴입니다. raw 문자열(쌩문자열)을 그대로 출력합니다. 다만 백틱앞에는 \가 있어야 합니다.

// String.raw

let rawStr = String.raw`start \\\\ "" \n \t
new line \a '\' \`\` end`;

console.log(rawStr);

*실행결과:
start \\\\ "" \n \t
new line \a '\' \`\` end

다음처럼 사용할 수 있습니다. 정규식에서 \ 등의 문자 조합에 유용합니다.

// Raw 문자 표시

function tagRaw(strings) {
    console.log(strings.raw[0]);
}

tagRaw`
string line 1 \n 
       line 2 \`
string line 3`;

*실행결과:
string line 1 \n 
       line 2 \`
string line 3

요약

태그드 템플릿 리터럴(Tagged Template Literals)에 대해서 알아봤습니다. 변수나 표현식이 들어간 문자열인 템플릿 리터럴에 대한 여러 조작을 함수에서 처리할 수 있습니다.

태그드 템플릿 리터럴은 라이브러리 등에서 사용할 수 있으니까 알아둘 필요가 있습니다.

참고문서

Template literals – JavaScript | MDN (mozilla.org)

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