[Javscript] Tagged Template Literal

1. Template Literal 이란?

템플릿 리터럴은 ' ` '(grave accent)로 감싸진 문자열 리터럴로서 여러 줄로 이뤄진 문자열과 문자 보간 기능을 

표현할 수 있다.

 

일반적으로 JS에서 스트링을 표현하고자 한다면 주로 (') 문자나 (") 문자를 사용한다.

이것을 Single/Double quotation (싱글 쿼테이션 / 더블 쿼테이션) 이라고 부른다.

 

하지만 템플릿 리터럴은 똑같은 스트링을 표현하지만 grave accent(억음 부호) 라고 부르는 ( ` ) 문자로 

감싸진 String을 사용한다.

 

그럼 이 둘 중에 어떤 것이 차이가 날까?

 

1-1. 줄 바꿈 표현

첫번째 로 줄 바꿈을 조금 더 편하게 표현해 줄 수 있다.

일반적으로 String에서 줄 바꿈을 표현할 때 이런식으로 '\n' 문자를 사용해 직접 삽입해주어야 줄바꿈이 

이루어졌는데...

console.log("string text line 1\n" + "string text line 2");
// "string text line 1 string text line 2"

하지만 템플릿 리터럴을 사용한다면 어떻게 줄바꿈이 이루어 질까?

console.log(`string text line 1 string text line 2`);
// "string text line 1 string text line 2

이런식으로 개발자가 따로 표시를 하지 않고도 좀 더 직관적으로 Enter만 입력해주어도, 개행문자를 표현해 줄 수 있다.

 

하지만 C++을 이용하는 개발자들은 '\n'을 따로 삽입해주는 편이 더 명시적인 표현법이라 고 할 수 있는데 

 

그래서 이런 기능보다는 조금더 좋은 특성을 활용할 수 있다.

 

1-2. Expression Interpolation

두 번째로는 interpolation이 가능하다!

주로 '보간' 아라는 말로 해석할 수 있고 뭔가를 끼워 넣는다는 표현인데 문자열 사이에 

표현식(코드)를 끼워넣을 수 있다는 이야기 이다.

 

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

이런 식으로 사용할 수 있다.

 

하지만 원래 방법으로도 사용이 가능한데 

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

조금 만 더 손가락이 빠르다면 가능한 일이다.

 

하지만 Template Literal을 사용했을 떄 코드 길이가 훨씬 짦고 간결해 보이는 경우가 있어,

사용가능한 부분에는 사용하는 것을 추천한다.

 

1-3. Tagged String 

마지막으로 tagged string이라는 기능도 있다.

이것을 사용하면 템플릿 리터럴을 함수로 Parsing(파싱) 할 수 있다.

 

코드 면에서 직접 보면 

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


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

이런 형식으로 사용할 수 있다.

 

좀 더 실무적으로 도움이 될 예시가 있다만 오늘을 Template Literal Type에 대해 포스팅하는 글이라 

 

템플릿 리터럴을 함수로 파싱할 수 있다!만 알고 있다면 Tagged String에 대한 포스팅도 참고하길 바란다!!

 

 

참고자료

템플릿 리터럴 타입(Template Literal Types)