[JavaScript] 템플릿 리터럴

템플릿 리터럴에 대해서

Template literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.

템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. ES2015 사양명세서에선 template strings라고 불렸습니다.
템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다.
프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하기 때문에 , 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되어 사용되고 있습니다.

---

Syntax

`string text`
`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸줍니다. 위 예시에서 템플릿 리터럴에서 제공하는 기능들을 사용해봤습니다.

---

Expression interpolation (표현식 삽입법)

ES6 이전엔 표현식을 다음과 같이 일반 문자열 안에 집어넣었습니다.

var num1 = 20;
var num2 = 5;
var str1 = "학생";
var result = "저는 " + (num1 + num2) + "살이고 " + str + "입니다.";
console.log(result);   //저는 25살이고 학생입니다.

템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기할 수 있습니다.

let num1 = 20;
let num2 = 5;
let str = "학생";
let result = `저는 ${num1+num2}살이고 ${str}입니다.`;
console.log(result);   //저는 25살이고 학생입니다.

다음과같이 + 연산자로 문자열을 이어주는것 보다 가독성을 증가시킬 수 있습니다.

---

Tagged templates

템플릿 리터럴의 발전된 형태의 하나로 태그드 템플릿이 있습니다. 태그를 사용하여 템플릿 리터럴을 함수로 파싱할 수 있습니다.
아래 코드는 기본 함수와 동일한 태그 함수입니다.

let person = 'M';
let age = 25;

let tag = function(strings, personExp, ageExp) {    //함수 이름은 원하는 대로 가능
    let str0 = strings[0];
    let str1 = strings[1];
    console.log("str0 : " + str0);  //strings는 
    console.log("str1 : " + str1);

    let ageStr;
    if(ageExp > 99) ageStr = 'centenaian';
    else ageStr = 'youngster';

    return str0 + personExp + str1 + ageStr;    //이 함수 내에서 template literal 반환 가능
};
let output = tag`that ${person} is a ${age}`;
console.log(output);    //that M is a youngster

태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다.
이 첫 번째 인수, 즉 문자열 값의 배열은 표현식을 기준으로 split됩니다.

let myTag = function(strings, a, b, c) {
    console.log(`문자열 배열 길이 : ${strings.length}`);    //4, 마지막 템플릿 뒤에 빈 문자열
    for(let i = 0; i < strings.length; i+=1) {
        console.log(`문자열 요소 [${i}]: ${strings[i]}`);
    }
    console.log(a);
    console.log(b);
    console.log(c);
}
let html = 5;
let css = 3;
let js = 'es10';
let string = myTag`HTML${html}, CSS${css}, JavaScript ${js}`;

Tagged templates는 데이터 별로 조건이 다른 경우 유용하게 쓰일 수 있습니다.

const Foods = [
    {
        food: '한식',
        items: ['김치','된장찌개','불고기','비빔밥']
    },
    {
        food: '양식',
        items: ['파스타', '리조또']
    },
    {
        food: '중식',
        itmes: []
    }
];

console.log(`먹고싶은 ${Foods[0].food}의 종류 : ${ramenList[0].items}`);
// 먹고싶은 한식의 종류: 김치, 된장찌개, 불고기, 비빔밥
console.log(`먹고싶은 ${Foods[1].food}의 종류 : ${ramenList[1].items}`);
// 먹고싶은 양식의 종류: 파스타, 리조또
console.log(`먹고싶은 ${Foods[2].food}의 종류 : ${ramenList[2].items}`);
// 먹고싶은 중식의 종류: 

---

Raw strings (원래 문자열)

Raw string은 이스케이프 문자를 해석하지 않은 일반 문자열입니다.
String.raw 태그함수를 사용하면 템플릿 문자열을 입력한 대로 출력할 수 있습니다.

let s = String.raw`xy\n${1+1}z`;
console.log(s);     //xy\n2z

태그 함수를 만들어 원래의 문자열을 반환하려면 첫 번째 인자의 raw 프로퍼티를 사용하면 됩니다.

let tag = function(strings) {
    return strings.raw[0];
}

let str = tag`Hello\nWorld.`;
console.log(str);       //Hello\nWorld.