문자와 변수를 함께 쓸 수 있는 Template Literal : ``

Template Literal

`텍스트 &{변수명} 텍스트 텍스트 ~~`

• 템플릿 리터럴이란, 문자와 변수를 함께 쓸 수 있는 도구이다.
• 따옴표 대신 백틱(``)을 이용한다.
• 텍스트와 표현식을 백틱으로 감싸고 그 안에 String과 변수를 넣으면 된다.
  변수는 이렇게 👉🏻 ${변수명}
• 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬(\)를 넣으면 된다.
• 줄바꿈은 그냥 안에서 엔터 치면 된다.

[Tagged templates]

• 템플릿 리터럴의 더욱 발전된 형태로, 태그를 사용하면 템플릿 리터럴을 함수로 파싱할 수 있다.
• 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함한다.
• 나머지 인수는 표현식과 관련된다.
• 이 함수는 조작된 문자열을 반환할 수 있다.
• function 이름은 마음대로~!

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