자바스크립트(javascript) 템플릿 문자열(template strings) 알아보기

템플릿 문자열(Template Strings)이란 ES6부터 추가된 문자열 내장 표현식 개념입니다. 최신 버전의 자바스크립트 문서에서는 템플릿 리터럴(Template Literals)으로 불리고 있으나, 아직까지는 템플릿 문자열이 더 많이 쓰이고 있는 용어이므로 템플릿 문자열로 표기하겠습니다.

 

'string text'

`string text line1
 string text line2`
 
 `string text ${표현식}`

템플릿 문자열은 기존의 쌍따옴표("), 따옴표(')를 사용하지 않고 백틱(`, grave accent) 특수문자를 통해 사용할 수 있습니다.

그리고 중괄호와 $ 기호를 통한 플레이스 홀더로 감싸서 내부 표현식으로 전달할 수 있으며, 그 사이의 텍스트는 기본 함수로 전달되어 단일 문자열로 연결됩니다.

반환되는 자료형은 기존의 String형과 같습니다.

 

만약 숫자 5와 10을 저장한 변수인 a와 b를 더하는 과정을 문자열로 표현하는 예제를 코딩한다면, 템플릿 문자열을 사용하지 않은 기존 코드는 다음과 같습니다.

let a = 5;
let b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

이를 템플릿 문자열로 표현하면, 더욱 작성이 용이해지고 가독성 또한 좋아진 코드를 볼 수 있습니다.

let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and 
// not 20."