ES6알아보기 08 - Template Literals

ES6에서는 문자열에 변수를 추가하거나 문자열끼리 연결하는 것이 더욱 심플해졌습니다.

ES6 이전

var word = 'world';
console.log('hello ' + word + '!');

ES6

var word = 'world';
console.log(`hello ${world}!`);

위에서 예와 같이 template literals 를 이용하기 위해서는 ' comma가 아닌 ` backtick 을 이용해서 문자열을 감싸줍니다. 변수를 문자열 안에 넣기 위해서는 ${expression} 처럼 Placeholder 를 사용해 넣게 됩니다.

expression 안에서는 javascript 연산도 가능하게 됩니다.

var num1 = 3;
var num2 = 2;
console.log(`sum: ${num1 + num2}`); // sum: 5

특히 여러줄의 문자열을 연결할 경우 매우 유용하게 사용할 수 있습니다.

var year = 2018;
var month = 6;
var day = 21;

console.log(`오늘은
${year} 년
${month} 월
${day} 일 입니다.
`); 
// 출력값
/*
오늘은
2018 년
6 월
21 일 입니다.
*/

기존의 문자열 연결과 ES6의 template Literal 사이의 퍼포먼스 차이

+ 를 기용한 문자열 연결과 ES6 의 Template Literal 중 메모리 할당과 관련해서 어떤쪽이 더 효율적일까요? 넷상에서도 어떤쪽이 효율적인지 나름 논쟁이 있는 것 같습니다. 퍼포먼스 관력해서 javascript 코어까지 살펴볼 수는 없었지만 아래의 테스트 케이스를 참고해보면 좋을 것 같습니다.
https://jsperf.com/es6-string-literals-vs-string-concatenation

각 브라우저, 버전, compliler 엔진별로 차이가 있겠지만 대체적으로 template Literal쪽이 더 높은 퍼포먼스 를 보여주는 것 같습니다. 가독성 뿐만 아니라 퍼포먼스도 높으니 사용하지 않을 이유가 없겠네요.