TIL #17 템플릿 문자열

템플릿 문자열(template string)은 기존에 사용되던 병합연산자를 개선하기 위해 ES6에서 새롭게 출시된 기능이다.

기존 자바스크립트에서는 문자열과 문자열 또는 문자열과 변수를 연결하려면 병합연산자(+)를 사용해야했다.

기존 자바스크립트에서의 문자열 사용 방법
문자열과 문자열을 연결하는 예시)

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = string1 + ' ' + string2;

문자열과 변수를 연결하는 예시)

var product = {name: '도서', price:'4200원'}
var message = '제품' + product.name + '의 가격은' + product.price + '입니다';

연산결과 구하기 예시)

var value = 1;
var value = 2;
var boolValue = false;
var operator1 = '곱셈값은' + (value1 + value2) + '입니다.';
var operator2 = '불리언 값은' + (boolValue ? '참' : '거짓') '입니다.';

이처럼 병합 연산자를 사용하다보면 간단한 문자열을 표시하기 위해서 코드가 복잡해진다.

템플릿 문자열은 작은따옴표 (' ') 대신 백틱(`)으로 문자열을 표현한다.

템플릿 문자열 사용 방법
문자열과 문자열을 연결하는 예시)

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = `${string1} ${string2};

문자열과 변수를 연결하는 예시)

var product = {name: '도서', price: '4200원'};
var message = `제품 ${product.name}의 가격은 ${product.price}입니다.`

연산결과를 구하는 예시)

var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1*value2}입니다.`;
var operator2 = `불리언 값은 ${boolValue ? '참' : '거짓'}입니다.;

이처럼 템플릿 문자열을 사용하게 되면 병합 연산자를 사용하지 않고 하나의 문자열에 문자열과 변수를 함께 사용할 수 있다.
또한 특수 기호 $ 를 이용하여 변수 또는 식을 포함할 수 있고, 일반 자바스크립트에서 줄바꿈을 위해 이스케이프 시퀀스(\n)을 사용하지만 템플릿 문자열에서는 enter 키를 이용하여 줄바꿈을 할 수 있다.