[ES6+] 템플릿 리터럴(Template Literal) - 백틱(back-tick) `

ES6에서 도입된 템플릿 리터럴(Template Literal)인 문자열 표기법에 대해 알아보자.

 

템플릿 리터럴은 지금까지 문자열 표현에 흔히 사용해왔던 이중 따음표("") 나 작은 따음표('') 대신 백틱(``)을 사용한다.

 

템플릿 리터럴을 통해 다양한 기능을 제공하는데,

ES5에서의 기존 방식과 백틱을 사용한 비교 예제 코드를 통해 하나씩 알아가보자.

---

1. 백틱(back-tick) 기본 사용법

let blog = `mine-it-record`;

 

우선 기본 사용법에 대해 알아봤는데, 일단 기본적으로 더블쿼터와 싱글쿼터를 이용해 문자열을 선언하는 방식과 동일하다.

 

2. 줄바꿈 선언 (Multi-line strings)

//ES5
var str1 = 'string line 1\n' + "string line 2";

// string line 1
// string line 2
console.log(str1);

//ES6
let str2 = `string line 1
string line 2`;

// string line 1
// string line 2
console.log(str2);

 

더블쿼터나 싱글쿼터를 사용하게 되면 문자열에 줄바꿈을 주기 위해서는,

백슬래시(\)로 시작하는 이스케이프 시퀀스를 사용해야한다.

 

하지만 백틱(`)을 사용하게 되면 이 문법은 + 조차 해줄필요 없이 여러 줄에 걸쳐 문자열을 작성할 수 있으며,

템플릿 리터럴 내의 모든 공백은 있는 그대로 적용된다.

 

그래서 엔터를 치고 템플릿 리터럴을 그대로 사용하여 엔터공백이 그대로 적용된 것이다.

 

3. 문자열 중간에 변수 삽입하기 (Expression interpolation - 표현식 삽입법)

var a = 'mine';
var b = 'it';
var c = 'record';

//내 블로그는 mine-it-record 이다.
//ES5 
console.log("내 블로그는 " + a + "-" + b +"-" + c + " 이다.");

//ES6
console.log(`내 블로그는 ${a}-${b}-${c} 이다`);

 

기존에는 + 기호를 통해 변수를 입력받아 문자열을 만들어냈다면

백틱(`)을 사용하게 되면 변수를 그대로 삽입하여 사용이 가능하다.

가독성 측면에서 매우 훌륭하다는것을 알 수 있다.

 

그리고 ${} 이 기호안에서 간단한 연산 역시 가능하다.

var a = 5;
var b = 10;

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

 

4. 태그드 템플릿(Tagged templates)

var person = 'HAN';
var age = 30;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return str0 + personExp + str1 + ageStr;

}

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

console.log(output);
// that HAN is a youngster

 

템플릿 리터럴의 발전된 형태의 하나로 태긑드 템플릿이라는 녀석이다.

 

output 변수를 보면 함수명을 먼저 선언하고 그 뒤에 백틱을 선언해주었는데,

myTag 함수에서는 strings, persionExp, ageExp를 매개변수로 받고있다.

 

strings 는 백틱으로 이루어진 표현식을 기준으로 잘려서 들어오는데, 위 예제를 보고 설명을 하자면

["that ", " is a ", ""] 이렇게 길이가 3인 배열이 매개변수로 들어갈 것이다.

 

마지막 빈값은 ${age} 태그 표현식 뒤에 들어간 공백이라 큰 의미는없다.

 

그리고 그 뒤에 오는 매개변수 persionExp 와 ageExp 는 백틱에서의 각각에 태그표현식의 값을 의미한다.

예제를 보고 설명하자면 HAN과 30이 매개변수로 들어간다고 생각하면 된다.

---

개인적인 생각으로는 1~3번 예제까지만 알아도 큰 문제는 없을것 같고,

4번 예제를 포함한 나머지 기능들은 알아두면좋고 몰라도 크게 문제될것같지는 않다.

 

추가로 제공되는 기능으로는 중첩 템플릿(Nesting templates) 과 Raw strings(이스케이프 무시) 이다.

아래 참고글을 통해 이런게 있구나 정도만 일단 알아두도록 하자.

---

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

Template literals - JavaScript | MDN