[JavaScript] 템플릿 리터럴(Template Literals)이란?

템플릿 리터럴(Template Literals)

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱 문자(`)를 사용한다. 

 

템플릿 리터럴의 기능

1.  Expression interpolation (표현식 삽입법 )

백틱 사이에 ${ } 를 이용하여 변수나 연산 등을 삽입할 수 있게 되었다.

아래 예시를 보자.

기존 ES6 이전에는 따옴표(',")와 + 연산자를 이용하여 작성하였고, 변수 사이 + 를 넣어주는 불편한 방식이었다.

const num1 = 1;
const num2 = 2;
const msg = num1 + '+' + num2 + '=' + (num1 + num2);


console.log(msg);

<실행결과>  1+2=3

 

하지만 ES6 이후 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공하는데, 이를 문자열 인터폴레이션(String Interpolation)이라 한다.

우선 방법은 백틱안에 문자열을 작성하고, 표현식을 ${}으로 감싸준다. 이때 표현식은 문자열로 강제 타입 변환된다.

const num1 = 1;
const num2 = 2;
const msg = `${num1}+${num2}=${num1+num2}`;


console.log(msg);

<실행결과>  1+2=3

 

2.  Multi-line strings (멀티라인 문자열)

기존에는 줄바꿈은 허용되지 않으며 표현하기 위해서는 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용해야 했다. 하지만, 템플릿 리터럴은 여러 줄에 걸쳐 문자열을 작성할 수 있으며, 템플릿 리터럴 내의 모든 공백(white-space)은 있는 그대로 적용된다.

아래 예시를 보자.

ES6 이전에는 아래와 같이 이스케이프 시퀀스를 이용해 줄바꿈을 표현했다.

const msg1 = '이 줄은 첫번째 줄입니다.';
const msg2 = '이 줄은 두번째 줄입니다.';


console.log(msg1 + '\n' + msg2);

<실행결과>  이 줄은 첫번째 줄입니다.  이 줄은 두번째 줄입니다.

 

ES6 등장 이후에는 백틱(`) 내에서 엔터를 눌러 줄바꿈을 했고, 이게 그대로 표현되는 방식이다.

const msg = `이 줄은 첫번째 줄입니다.
이 줄은 두번째 줄입니다.`;


console.log(msg);

<실행결과>  이 줄은 첫번째 줄입니다.  이 줄은 두번째 줄입니다.

 

또한 템플릿 리터럴은 아래와 같이 작은 따옴표(')와 큰 따옴표(")를 혼용하여 사용할 수 있다.

const msg = `템플릿 리터럴은 '작은 따옴표'과 "큰 따옴표"를 혼용할 수 있다.`;

console.log(msg);

<실행결과>  템플릿 리터럴은 '작은 따옴표'과 "큰 따옴표"를 혼용할 수 있다.

 

템플릿 리터럴의 또 다른 기능으로는 Nesting Templates, Tagged Tempates 등이 있는데 잘 사용하지 않는 듯한 관계로 나중에 작성할 예정이다.

 

템플릿 리터럴의 장점

이 표기법은 다양한 장점이 있다. 우선 문자열내의 공백을 있는 그대로 제공하기 때문에 줄바꿈이 있는 문자열을 표현할 때 편리하고, + 연산자를 이용하지 않고 그대로 표현하여 가독성이 좋다. 또한, 작은 따옴표와 큰따옴표를 혼용할 수 있기 떄문에 편리하다.