2016년 3월 6일 일요일

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부터 지원한다.

참고자료



댓글 없음: