템플릿 리터널

 

템플릿 리터널은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 기능을 지원

1.  멀티라인 문자열 

일반 문자열 에서는 줄 바꿈이 허용되지 않아, 실행해야 하는 경우 이스케이프 시퀀스 를 사용해야 합니다.
하지만 템플릿 리터널은 줄 바꿈이 허용되며, 공백도 있는 그대로 적용됩니다.

 

2.  표현식 삽입

백틱 (` `)으로 감싼 문자열에 ${ } 형식 으로 감싸 표현식을 삽입할 수 있습니다. 

ex)
var name = 'lee';
var age ='28';

console.log(`제 이름은 ${name}이며, 나이는 ${age}입니다.`) // 제 이름은 lee이며, 나이는 28입니다.

주의 ) 백틱 (` `)으로 감싸지 않으면 문자열로 취급합니다.

ex)
var name = 'lee';
var age ='28';

console.log("제 이름은 ${name}이며, 나이는 ${age}입니다.") // 제 이름은 ${name}이며, 나이는 ${age}입니다.

 

3. 태그드 템플릿

Template Literals를 이용하여 함수의 인자를 파싱하여 넘겨주는 기능입니다.
(styled - components 형식)

 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다.
나머지 인수는 표현식과 관련됩니다.

 

ex)

var person = 'Mike';
    var age = 28;

    function myTag(strings, personExp, ageExp) {

      var str0 = strings[0]; // "that "
      var str1 = strings[1]; // " is a "

      // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로
      // ${age} 뒤에는 ''인 string이 존재하여
      // 기술적으로 strings 배열의 크기는 3이 됩니다.
      // 하지만 빈 string이므로 무시하겠습니다.
      // var str2 = strings[2];

      var ageStr;
      if (ageExp > 99){
        ageStr = 'centenarian';
      } else {
        ageStr = 'youngster';
      }

      // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다.
      return str0 + personExp + str1 + ageStr;

    }

    var output = myTag`that ${ person } is a ${ age }`;

    console.log(output);
    // 결과 값 that Mike is a youngster

응용

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

function fn(strings, brand, items) {
    let str;
    if(undefined === items) {
        str = brand + "의 라면은 재고가 없습니다!";
    } else {
        str = strings[0] + brand + strings[1] + items;
    }
    return str;
}

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