[ES6 JavaScript] Template Literals (Template Strings)

 오늘은 템플릿 리터럴에 대해서 알아보겠습니다. ES6이전에는 템플릿 스트링(Template Strings)라고 불렸습니다. 템플릿 리터럴은 문법적으로 더 편하게 문자열을 생성하는 방법입니다. 템플릿 리터럴은 백틱(``)을 이용합니다. 그리고 $와 중괄호(${expression})을 이용하여 표현식을 표기할 수도 있습니다. 템플릿 리터럴 안에서 백틱 문자를  사용하려면 백틱 앞에 백슬러시를 삽입하면 됩니다.

`\`` === "`" // --> true

 

Pixabay로부터 입수된 Pexels님의 이미지 입니다.  

 

 

Multi-line strings

 템플릿 리터럴에서 source내에 삽입되는 Newline Characters(\n)은 템플릿 리터럴의 일부가 됩니다. 아래와 같이 편리하게 사용할 수 있습니다.

let msg = "Hello world!\nShow me the money.";
console.log(msg);

msg = `Hello world!
Show me the money.`
console.log(msg);

 일반 적인 문자열 리터럴을 사용한 처음 console.log와 템플릿 리터럴을 사용한 두번째 console.log는 동일한 결과를 반환합니다. 

 

Expression interpolation(표현식 삽입법)

 템플릿 리터럴 내부에 표현식을 합입할 수 있습니다.

const hello = "hello world!";
const msg = `${hello}
Show me the money.
${300 + 100}`

console.log(msg);
/*
  "hello world!
  Show me the money.
  400"
*/

 

Nesting templates

 필요한 경우 템플릿을 중첩하면 문자열을 읽기가 쉽습니다. 예를들어 아래와 같은 코드가 있다고 합니다.

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ? ' icon-expander' : ' icon-collapser');

 클래스 문자열을 만드는 코드입니다. 먼저 isLargeScreen() 메서드를 호출하여 true이면 빈 문자열을 false이면 추가 문자열을 붙여주고 있습니다. 추가 문자열을 붙일때는 item.isCollapsed 여부를 확인하여 문자열을 붙여주고 있습니다. 위 코드를 템플릿 리터럴로 변환해보겠습니다.

const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

 위와 같이 변환할 수 있습니다. 표현식을 이용하여 문자열을 처리를 하고 있습니다. 하지만, Nesting없이 템플릿 리터럴을 사용하고 있습니다. 이를 Nesting 템플릿으로 변환해보겠습니다.

 

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

 

 

 위와 같이 변환할 수 있습니다. 백틱(``) 문자열 내부에 백틱(``)을 넣어 중첩된 구조로 사용할 수 있습니다.

 

Tagged templates

 템플릿 템플일을 함수로 파싱할 수 있는 방법을 제공합니다. 그것이 바로 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

 먼저 태그 함수 호출하는 부분을 보겠습니다.

var output = myTag`that ${ person } is a ${ age }`;

 일반적인 함수의 호출과는 다르게 괄호를 사용하지 않습니다. myTag의 결과는 반환되어 output 변수에 입력됩니다.

 

 태그 함수의 매개변수 입력은 이해를 돕기 위해 이미지를 준비했습니다. 첫번째 파라매터에는 문자열이 배열로 들어가고 이후 파라매터들은 함수 표현식이 들어가는 것을 확인할 수 있습니다. 함수 표현식의 갯수가 일정하지 않다면 아래와 같이 ... 표현을 사용하는 것도 하나의 방법일 것 같습니다.

function myTag(strings, ...exps) {
	// code
}

 

Raw strings

function tag(strings) {
  console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'

  태그 함수의 첫번째 함수 인수에서 row 속성을 이용하연 escape 처리하지 않은 원시 문자열을 얻을 수 있습니다. 위 예제에서는 '\n'이 포함된 문자열이 반환된 것을 확인할 수 있습니다. 

 

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

str.length;
// 6

str.split('').join(',');
// "H,i,\,n,5,!"

 String.raw() 메서드를 이용하여 Raw String을 생성할 수도 있습니다. 

 

 

참고:

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

Template literals

jsdev.kr/t/es6/2944

ES6 문법 정리