[JavaScript] Template Literals

✅ Expression interpolation (표현식 삽입법)

---

ES6 에서 새롭게 도입된 기능으로 템플릿 리터럴(Template Literals) 이라고 불린다.
백틱(``) 을 사용하여 문자열과 변수를 함께 사용할 수 있어 문자열 처리에 유용한 기능이다.

const output = `Hi, ${userName} and I am ${age}.`;

ES6 이전엔 표현식을 다음과 같이 일반 문자열 안에 집어넣는 방식

var a = 20;
var b = 8;
var c = "자바스크립트";
var str = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.";
console.log(str);   //저는 28살이고 자바스크립트를 좋아합니다.

템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기한 방식

let a = 20;
let b = 8;
let c = "자바스크립트";
let str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;
console.log(str);   //저는 28살이고 자바스크립트를 좋아합니다.

✅ Tagged templates

---

📝 Tagged templates

템플릿 리터럴의 더욱 발전된 형태가 'Tagged templates'다. 태그를 사용하면 템플릿 리터럴을 함수로도 파싱할 수 있다. 태그 함수의 첫 번째 인자는 문자열 값의 배열을 포함한다. 나머지 인수는 함수 표현식으로 조작 된 문자열을 반환 할 수 있다.

var person = 'Codify';
var age = 28;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "I am named "
  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`I am named ${ person } is a ${ age }`;

console.log(output);
// I am named Codify is a youngster

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

✦ 출처

📚 MDN JavaScript Reference