[ECMAScript6] 템플릿 리터럴

ES6는 템플릿 리터럴(Template Literals)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 테그드 템플릿 등 편리한 문자열 처리 기능을 제공한다.

일반 문자열과 비슷해 보이지만 백틱` 을 사용한다.

var template = `template literal`;
console.log(template);

멀티라인 문자열

일반 문자열 내에서는 줄바꿈이 허용되지 않지만 백틱을 사용한 템플릿 리터럴에선 지원한다.

var str = `hello
world.`;

표현식 삽입

기존의 경우, 문자열 연산자 +를 사용해 문자열끼리 연결하였다. +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작하고, 그 외의 경우에는 덧셈 연산자로 동작한다.

// ES6 이전
var first = 'James';
var last = 'Lee';
console.log('My name is ' + first + ' ' + last + '.');

// ES6
var first = 'James';
var last = 'Lee';
console.log(`My name is ${first}, ${last}.`);

문자열 인터폴레이션(ES6: String Interpolation)은 ${ ... }표현식을 감싼다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.

console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"

참고 자료 : https://poiemaweb.com/es6-template-literals