[Javascript] 문자열 리터럴 (${Template literals})

Template literals

✏️ Template literals는 내장된 표현식을 허용하는 문자열 리터럴이다.

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

Expression interpolation (표현식 삽입법)

1. Template literals 사용 ✕

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

2. Template literals 사용

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

Template literals을 사용하면 코드를 읽을 때 가독성을 높일 수 있다.

---

Tagged templates

템플릿 리터럴 앞에 태그가 있다면, 템플릿 리터럴은 "태그가 지정된 템플릿" 이다.

태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함한다.

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