[ES6] 템플릿 리터럴(Template Literal)

템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식입니다. 기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나 ES6에서는 백틱(back-tick)이라는 기호(`)를 사용하여 정의합니다.

const str = `Hello ES6`;

 

여러 줄에 걸쳐 문자열 선언하기

 

기존 자바스크립트 문자열 선언 작은따옴표 '는 아래와같은 문제가 있다. 자동으로 개행이 되지않아 \n 을 중간중간 추가해줘야함...

var str = 'Template literals are string literals allowing embedded expressions. \n' + 
'You can use multi-line strings and string interpolation features with them. \n' + 
'They were called "template strings" in prior editions of the ES2015 specification.';

백틱을 이용하면 문자열 선언시엔 개행할 필요가 없다. 

const str = `Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with them.
They were called "template strings" in prior editions of the ES2015 specification.`;

 

문자열 중간에 변수 바로 대입하기

 

기존 문자열 정의 방식에서 또 번거로웠던 부분은 바로 자바스크립트 변수 값을 문자열과 함께 사용하는 부분이었습니다.

 

기존

var language = 'Javascript';
var expression = 'I love ' + language + '!';
console.log(expression); // I love Javascript!

백틱안에서 ${}  을 이용하면 변수의 값을 대입할수 있고 간단한 연산도 가능하다.

var language = 'Javascript';
var expression = `I love ${language.split('').reverse().join('')}!`;
console.log(expression); // I love tpircsavaJ!