[ES6] 템플릿 리터럴(Template Literals)

써보면 써볼수록 신세계를 경험하는 템플릿 리터럴. 놀라다가 숨넘어가십니다.

템플릿 리터럴은 이중 따옴표(" ") 나 홑 따옴표(' ') 대신 백틱(` `)을 사용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} )로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다.

 

1) Multi-line strings

console.log("Codify Blog\n" + "놀러온 것을 환영합니다!");
console.log(`Codify Blog
놀러온 것을 환영합니다!`);
/*Codify Blog
놀러온 것을 환영합니다!*/

편하긴 하지만, 예쁜 코드를 위해 탭을 넣으면 그마저도 인식해버리는 문제가 있습니다 : )

 

2) Expression interpolation

var a = 10;
var b = 8;
console.log("내 나이가 " + (a + b) + " 이면 좋겠지만, " + (2 * a + b) + " 이다.");
console.log(`내 나이가 ${a + b} 였으면 좋겠지만, ${2 * a + b} 이다.`);
// 내 나이가 18 이면 좋겠지만, 28 이다.

눈으로만 슬쩍 봐도 더 편한 감이 있습니다. 변수마다 + 넣어주는게 상당히 귀찮은 일이죠 ㅎㅎ...

 

3) Nesting templates

// In ES5:
var classes = 'header'
classes += (isLargeScreen() ?
	'' : item.isCollapsed ?
	' icon-expander' : ' icon-collapser');
     
// In ES6 without nesting:
const classes = `header ${ isLargeScreen() ? '' :
	(item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

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

백틱과 $ {expression} 을 적극 활용한다면 위 처럼 삼항 연산자를 사용하는 등 다양한 활용이 가능합니다. 게다가 백틱 안에 백틱을 사용할 수 있다는 장점도 가지고 있습니다.

 

 

4) 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!"

 

 

번외) Tagged templates and escape sequences

ECMAScript 2016에서 tagged templates은 다음 escape sequences의 규칙을 따릅니다.

 

• Unicode escapes started by "\u", for example \u00A9

• Unicode code point escapes indicated by "\u{}", for example \u{2F804}

• Hexadecimal escapes started by "\x", for example \xA9

• Octal literal escapes started by "\" and (a) digit(s), for example \251

 

이는 다음과 같은 tagged template이 문제가 된다는 것을 의미하는데, ECMAScript문법에 따라, parser는 유효한 유니 코드 탈출 시퀀스가 있는지 확인하지만 형식이 잘못되었기 때문에 오류가 발생합니다.

 

latex`\unicode` 
// Throws in older ECMAScript versions (ES2016 and earlier) 
// SyntaxError: malformed Unicode character escape sequence

 

번외) Raw strings

 

특별한 raw property을 사용하면  escape sequences 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다.

 

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

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

var str = String.raw`Hi\n${2+3}!`	// "Hi\n5!"
str.length				// 6
str.split('').join(',')			// "H,i,\,n,5,!"

 

 

MDN web docs 사이트를 참 좋아하는데요, 거기서 긁어 왔습니다.

 

더욱 자세한 내용을 원하시면 아래의 링크롤 통해 공부해보세요 ^-^

 

---

 

- 출처 -

 

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

Template literals

https://poiemaweb.com/es6-template-literals

Template Literals | PoiemaWeb