[JavaScript] Template Literals

ES6에서 소개된 Template Literal은 여러 줄로 이루어진 문자열과 문자 보간기능(특정 값으로부터 다른 값을 추정하는 것)을 지원한다.

 

가장 큰 특징은 이중 따옴표(" ")나 작은 따옴표(' ') 대신 백틱(backtick)문자(` `)_키보드 숫자 1 왼쪽에 위치 를 사용한다는 것이다. 세부 특징은 다음과 같다.

 

Multi-line strings

 

일반 문자열 사용 시 개행(改行)을 위해서 문자 사이에 '\n' 를 사용해야 한다.

하지만 template literal을 활용하면 문자열이 있는 그대로 적용된다. 일반 문서 작성 하듯이 작성해도 그대로 적용된다.

 

일반 문자열

console.log(
"There Is A Light \nThat Never Goes Out"
);
// There Is A Light
// That Never Goes Out

template literal

console.log(
`There Is A 
Light 
That Never Goes Out`
);

// There Is A
// Light
// That Never Goes Out

 

Expression interpolation

 

표현식(expression)을 일반 문자열과 함께 사용하는 경우 일반적으로 ' + ' 기호로 문자열과 표현식을 분리한다.

template literal의 경우 문자열과 표현식을 분리하지 않고 ${ 표현식 } 형태로 작성하면 추가적인 연결 기호 없이 문자열과 자연스럽게 연결된다.

 

일반 문자열

var a = 1;
var b = 2;

console.log("There Are" + (a + b) + "Lights That Never Goes Out");
// There Are 3 Lights That Never Goes Out

template literal

var a = 1;
var b = 2;

console.log(`There Are ${a + b} Lights That Never Goes Out`);

// There Are 3 Lights That Never Goes Out

 

참고

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals#expression_interpolation%ED%91%9C%ED%98%84%EC%8B%9D_%EC%82%BD%EC%9E%85%EB%B2%95

Template literals - JavaScript | MDN