[JavaScript] 템플릿 리터럴(template literal)의 여러가지 용도

기본적인 사용법 외에 템플릿 리터럴을 사용하는 방식을 설명하고자 합니다.

 

Nesting Templates

템플릿 리터럴을 중첩하는 방식입니다, 삼항 조건 연산자의 예시로 확인 해 보겠습니다.

function isLoveTS() {
  return true;
}
function isLoveJS() {
  return true;
}

const classes = `자바스크립트${
  isLoveJS()
    ? `${isLoveTS() ? '와 타입스크립트를 사랑힙니다.' : '만 사랑합니다'}`
    : '를 싫어합니다.'
}`;

console.log(classes); // 자바스크립트와 타입스크립트를 사랑합니다.

Tagged Templates

템플릿 리터럴을 함수의 인수로 넣는 방식입니다.

const city = 'Seoul';
let age = 26;

function myTag(strings, cityExp, ageExp) {
  console.log(strings); // [ 'I live in ', '  I am ', '' ]
  console.log(cityExp); // Seoul
  console.log(ageExp); // 26
  
  let str0 = strings[0];
  let str1 = strings[1];
  let cityStr;
  if (cityExp === 'Seoul') {
    cityStr = '. I live in capital.';
  } else {
    cityStr = '';
  }

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

let output = myTag`I live in ${city}  I am ${age}`;

console.log(output); // I live in Seoul. I live in capital.  I am 26

myTag 함수를 템플릿 리터럴을 이용하여 호출합니다. 이와 같은 방식을 태그 함수라고 부릅니다.

myTag 안의 콘솔에 어떻게 찍혔는지를 보면 쉽게 이해하실 수 있습니다.

myTag 함수의 첫 번째 매개변수인 strings에는 템플릿 리터럴에서 문자열 값의 배열입니다, 마지막에 ''이 찍히는 이유는 ${age} 뒤에 ''인 스트링이 존재하기 때문입니다. 두 번째 매개변수 부터는 표현식이 순서대로 들어가게 됩니다.

함수의 이름은 마음대로 변경해도 됩니다.

 

Raw Strings

raw 프라퍼티를 이용하여 태그 함수에서 이스케이프 문자를 그대로 출력할 수 있습니다.

function tag(strings) {
  console.log(strings.raw); // [ 'string text line 1 \\n string text line 2' ]
  console.log(strings.raw[0]); // string text line 1 \n string text line 2
}

tag`string text line 1 \n string text line 2`;

String.raw() 정적 메서드를 사용하여 이스케이프 문자를 그대로 출력할 수 있습니다.

let str = String.raw`Hi\n${2 + 3}!`;
console.log(str); // Hi\n5!

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals