ES6 Template String

ES6부터는 Template String(Template Literals)을 사용할 수 있다. Template String은 자바스크립트에서 문자열을 보다 쉽게 다룰 수 있도록 해준다.

템플릿 스트링은 backtick( `` ) 문자를 사용한다. 

var greeting = `Yo World!`;

문자열 치환(String Substitution)

그동안 자바스크립트에서 변수 값을 이용해 문자열을 만들려면 + 기호를 통해 문자열을 합쳐서 사용하거나 배열의 join 메서드를 주로 이용했다.

es6에서는 backtick으로 생성한 문자열과 placeholder만 있으면 간편하게 치환할 수 있다.

// Simple string substitution

var name = "Brendan";

console.log(`Yo, ${name}!`);

// => "Yo, Brendan!"

이렇게 변수를 치환하는 것 뿐만 아니라 표현식도 가능하다.

var a = 10;

var b = 10;

console.log(`JavaScript first appeared ${a+b} years ago. Crazy!`);

//=> JavaScript first appeared 20 years ago. Crazy!

console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.

표현식 뿐만 아니라 함수도 가능하다.

function fn() { return "I am a result. Rarr"; }

console.log(`foo ${fn()} bar`);

//=> foo I am a result. Rarr bar.

다중 문자열 (Multiline Strings)

ES6 이전까지 여러 줄의 문자열을 만드려면 다음처럼 해야했다.

var message = [

    "Multiline ",

    "string"

].join("\n");

let message = "Multiline \n" +

    "string";

ES6에서는 간단하게 다음처럼 하면 된다.

let message = `Multiline

string`;

console.log(message);           // "Multiline

                                //  string"

Tagged Templates

태그 템플릿은 템플릿 리터럴을 변환해 원하는 문자열로 변경할 수 있게 해준다.

var query = '보정동까페거리';
var type = 'json';

var params = parameter`query=${query}&type=${type}`

여기서 parameter는 템플릿 태그명이다.

태그 선언하기

태그는 템플릿 리터럴을 처리하는 함수이다. 함수의 첫번째 인자에는 템플릿 리터럴이 넘어오고 그 다음부터는 리터럴에서 사용하는 데이터가 넘어온다.

태그 함수는 다음과 같은 형태로 작성하면된다.

function parameter(literals, ...substitutions) {

    // return a string

}

사용하는 자바스크립트 엔진에서 아직 가변 인자(rest arguments)를 지원하지 않는다면 다음처럼 정의해서 사용할 수도 있다.

function parameter(literals) {

  var substitutions = [].slice.call(arguments, 1);

  // return a string

}

변수명	값
literals	[ 'query=', '&type=', '' ]
substitutions	[ '보정동까페거리', 'json' ]

여기서 주의할 점은 literals는 substitutions보다 항상 1개 더 많다. substitutions.length === literals.length - 1 이다.

parameter 메서드를 완성하면 다음과 같다.

function parameter(literals) {

  var result = literals[0];

  var substitutions = [].slice.call(arguments, 1);

  for (var i = 0; i < substitutions.length; i++) {

    result += encodeURIComponent(substitutions[i]) + literals[i + 1];

  }

  return result;

}

참고로 Template Strings은 NodeJS v4.0.0부터 지원한다.

참고자료

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

https://leanpub.com/understandinges6/read#leanpub-auto-template-literals