[JS] Template Literals

템플릿 리터럴

자바스크립트에서 문자열을 입력하는 방식의 하나이다.
따옴표를 사용해 문자열을 묶는 방식과 달리, 따옴표( '' , "" ) 대신 백틱( `` )을 사용한다.

사용법

var str = `hello ES6`;

위 방식처럼 백틱을 사용하면, 여러 줄에 걸쳐 문자열을 정의하거나 자바스크립트 변수를 문자열 안에 바로 연결할 수 있는 장점이 있다.

예시 1 : 여러 줄에 걸쳐 문자열 선언

따옴표( '' )를 사용한 선언

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.';

따옴표를 사용하여 긴 문자열을 선언하게 되면 자동으로 줄바꿈이 되지 않기 때문에 개행하고자 하는 위치에 더하기 연산자 + 와 줄바꿈 기호 \n 을 계속 추가해주어야 하는 번거로움이 있다.

백틱( `` )을 사용한 선언

var 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.`;

백틱을 이용한 경우 긴 문자열을 선언한다 해도 따로 개행할 필요가 없다.

플레이스 홀더 ${ }

백틱 기호를 이용하는 경우, 플레이스 홀더 ${ } 로 감싼 자바스크립트 변수 또는 표현식을 간편하게 문자열에 삽입할 수 있다.

예시 2 : 문자열 중간에 변수 바로 삽입

따옴표( '' )를 사용한 선언

// str to be 'hello ES6'
var newEdition = 'ES6';
var str = 'hello ' + newEdition; // 'hello ES6'

따옴표를 사용하여 선언되는 문자열의 중간에 변수를 삽입하기 위해서는 연산자 + 를 통해 삽입하려는 변수와 나머지 문자들을 연결해주는 과정이 필요하다.

백틱( `` )을 사용한 선언

// str to be 'hello ES6'
var newEdition = 'ES6';
var str = `hello ${newEdition}`; // 'hello ES6'

// str to be 'hello ES6'
var prevEdition = 'ES5';
var str = `hello ${prevEdition.slice(0, -1)}${5 + 1}`; // 'hello ES6'

백틱을 이용하는 경우, 플레이스 홀더 ${ } 를 사용하여 변수 또는 표현식의 값을 문자열에 간편하게 사용할 수 있다.