Javascript - ES6 (` : 템플릿 리터럴) 문자열에 변수 포함시키기

이번 포스팅에서는 ES6에서 추가된 템플릿 리터럴에 대해 알아보겠습니다.

 

 

1. 템플릿 리터럴이란? (`)

우선 템플릿 리터럴에 이용되는 특수문자는 ` 로써, 키보드 숫자 1 왼쪽에 있는 특수문자(~) 입니다. 주로 백틱(backtick)이라고 불릐웁니다.

 

이는 문자열에, 변수를 추가해 사용할 때 사용되며, 아주 편리한 기능입니다.

 

 

 

2. 템플릿 리터럴이 없었을 때

xxxxxxxxxx
let a = 1;
let b = 2;
​
console.log("a + b = " + (a+b));

템플릿 리터럴이 없었던 때에, console에 변수를 이용해 무언가를 출력하는 경우, 위와 같이 사용을 했었습니다.

간단히 설명드리면, 문자열의 경우 ''(싱글쿼테이션) 또는 ""(더블쿼테이션)을 이용해 묶어주고, 또 변수를, 사용하기 위해 문자열을 끝내고 + 연산자를 통해 변수를 연결했습니다.

 

위의 예제는 짧기 때문에 간단하지만, 문자열, 변수가 교차로 반복되는 경우에는 매우 귀찮았습니다.

 

 

 

 

3. 템플릿 리터럴 사용

xxxxxxxxxx
let a = 1;
let b = 2;
​
console.log(`a + b = ${a+b}`);

템플릿 리터럴을 사용하는 경우 위와 같이 매우 간단해집니다.

 

우선 문자열 및 변수를 포함하기 위해 (`)으로 시작합니다. 그 후, 문자열을 자유롭게 사용하고, 변수를 사용하기 위해서는 ${변수}의 형식으로 적어줍니다. 마지막으로, 다시 (`)으로 마무리합니다.

 

이렇게 문자열에 변수를 삽입할 수 있는 기능을 문자열 인터폴레이션(${변수})이라고 합니다.