JS Tagged Template Literal

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

Template literals - JavaScript | MDN

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) ( grave accent) 을 이용합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

JSX-Like Syntax for Tagged Template Literals in JavaScript

I recently moved my blog off Jekyll. Instead of choosing an off-the-shelf templating framework, I naively decided I would attempt rolling my own. My blog is pretty simple in terms of what needs to be done. A couple pages, a hundred or so posts, and some feed files. Nothing too sophisticated.

https://blog.jim-nielsen.com/2019/jsx-like-syntax-for-tagged-template-literals/