Template literals

: 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이뤄진 문자열과 문자 보간(변수 의 함수의 형태는 알 수 없으나 몇 가지 에 대한 함숫값 가 알려져 있을 때 그 사이의 임의의 에 대한 함숫값을 추정하는 것.)기능을 사용할 수 있다. 이전 버전의 ES2015에서는 "template strings" (템플릿 문자열) 라고 불렸었다.

Syntax

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

특징

템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱을 사용. 또한 placeholder를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있다. placeholder 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달된다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬를 넣으면 됌.

Expression interpolation(표현식 삽입법)

표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서, 이 문법을 사용할 수 있다.

let a = 5;
let b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

template literals을 사용하면 보다 읽기 편하다.

let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

Tagged templates

템플릿 리터럴의 발전된 형태의 하나로 태그드 템플릿이 있다. 태그를 사용하여 템플릿 리터럴을 함수로 파싱할 수 있다.

let person = 'Lee';
let age = 28;

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 Lee is a youngster

template literals을 사용

const ramenList = [
    {
        brand: '농심',
        items: ['신라면','짜파게티','참치마요','둥지냉면']
    },
    {
        brand: '삼양',
        items: ['삼양라면', '불닭볶음면']
    },
    {
        brand: '오뚜기',
        itmes: []
    }
];

console.log(`구매가능한 ${ramenList[0].brand}의 라면 : ${ramenList[0].items}`);
//구매가능한 농심의 라면 : 신라면,짜파게티,참치마요,둥지냉면
console.log(`구매가능한 ${ramenList[1].brand}의 라면 : ${ramenList[1].items}`);
//구매가능한 삼양의 라면 : 삼양라면,불닭볶음면
console.log(`구매가능한 ${ramenList[2].brand}의 라면 : ${ramenList[2].items}`);
//구매가능한 오뚜기의 라면 : undefined