LHJ

I'm a FE developer.

3.8.1 템플릿 문자열

18 Apr 2020 » js_lj

값을 문자열 안에 써야 하는 일이 아주 많습니다.
이때 문자열 병합(concatenation) 을 통해 변수나 상수를 문자열 안에 쓸 수 있습니다.

let currentTemp = 19.5;
// 00b0는 온도를 나타내는 유니코드 코드 포인트입니다.
const message = "The current temperature is " + currentTemp + "\u00b0C";

ES6 이전에는 변수나 상수를 문자열 안에 쓰는 방법은 (외부 라이브러리를 사용하지 않으면) 문자열 병합뿐이었습니다.
ES6에서는 문자열 템플릿(template) 이라는 기능을 도입했습니다.
이 기능을 문자열 채우기(interpolation) 라 부르기도 합니다.
문자열 템플릿은 문자열의 정해진 위치에 값을 채워넣는 간편한 방법입니다.
문자열 템플릿에는 큰따옴표나 작은따옴표를 쓰지 않고 백틱(backtick)을 사용합니다.
다음은 앞에서 살펴본 예제를 문자열 템플릿을 사용해서 고쳐 쓴 겁니다.

let currentTemp = 19.5;
const message = `The current temperature is ${currentTemp}\u00b0C`;

문자열 템플릿 안에서는 달러 기호가 특수문자가 됩니다.
달러 기호 다음에 중괄호로 감싼 값을 쓰면 그 값이 문자열에 삽입됩니다.
(중괄호 안에 어떤 표현식이라도 쓸 수 있습니다. 표현식에 대해서는 5장에서 설명합니다.)
(문자열 템플릿 안에 달러 기호를 써야 한다면 역슬래시로 이스케이프하면 됩니다.)

문자열 템플릿은 필자가 좋아하는 ES6 기능 중 하나입니다.
이 책에서 문자열 템플릿을 자주 사용할 겁니다.