템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이뤄진 문자열과 문자 보간 기능을 사용할 수 있다.
이전 버전의 ES2015 사양 명세에는 "template strings" (템플릿 문자열) 라고 불려 왔다.
Syntax
템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(``) 을 이용한다. 문자열, 숫자열, 변수 등을 연결할 때 "+"를 이용하는 것이 아닌 백틱을 이용해 더 깔끔하고 편리하게 만들 수도 있다.
console.log(오늘은 ${year}년 ${month}월 ${date}일 입니다.) console.log(오늘은 ${hours}시 ${minutes}분 ${seconds}초 입니다.)
문장과 변수를 함께 쓸 때 "+"로 연결하는 것보다 더 깔끔하게 사용하는 방식을 템플릿 리터럴(Template literal) 이라고 한다. 실무에서는 이 방식을 사용한다.
템플릿 리터럴은 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데 이는 $와 중괄호 ( $ {expression} ) 로 표기할 수 있다. 플레이스 홀더 안에서는 표현식과 그 사이의 텍스트는 함께 함수로 전달된다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 준다.
템플릿 리터럴 앞에 어떠한 표현식이 있다면 템플릿 리터럴은 "태그가 지저된 템플릿"이라고 불리게 된다. 이때 태그 표현식 (주로 함수) 이 처리된 템플릿 리터럴과 함께 호출되면 출력하기 전 조작할 수 있다.
템플릿 리터럴 안에서 백틱 문제를 사용하려면 백틱 앞에 백슬러시를 넣어야 한다.
표현식 삽입법
ES6 이전엔 표현식을 "+"을 사용하여 일반 문자열 안에 집어넣었다.
그러나 템플릿 리터럴에서는 위와 같이 $와 중괄호{}를 사용하여 표현식을 표기할 수 있다.
위처럼 "+" 연산자로 문자열을 연결해 주는 것보다 가독성이 더 좋다.
여러 줄로 작성하기
가독성 측면에서 템플릿 리터럴이 좋은 점은 여러 줄로 문자열을 작성하기가 편하다는 것이다.
HTML 코드를 작성할 때 처음과 마지막에 백틱을 넣어 주면 원래는 엔터를 인식하지 못하는 자바스크립트를 문자열에 개행 문자(\n)가 추가된 것처럼 사용할 수 있다.
- 참고
링크텍스트
