[모던 JS] 템플릿 리터럴

템플릿이란 일부만 변경해서 반복하거나 재사용할 수 있는 틀을 말한다.

 

템플릿 리터럴은

1. 템플릿 리터럴을 사용하면 표현식의 값을 문자열에 추가하거나

2. 여러 줄의 문자열을 표현할 수 있다.

기본적인 사용법

템플릿 리터럴은 역따옴표(`)를 사용한다.

 

`I'm going to learn JavaScript`

줄바꿈

var t = `Man errs as long as 
he strives.`;
var t = "Man errs as long as\nhe strives."
var t = `Man errs as long as\nhe strives.`

""을 사용하면 기존에 줄바꿈을 할 때에는 \n을 사용했는데, `를 사용하면 줄바꿈이 바로 반영된다.

`을 쓰고 \이스케이프 문자를 사용해도 된다.

//위의 줄과 아랫 줄의 의미가 동일하다. \를 문자열에 나타내고 싶을 때 이렇게 쓴다.
var t = String.raw`Man errs as long as \n he strives.`;
var t = "Man errs as long as \\nhe strives.";

이스케이프 시퀀스 문자를 그대로 출력하려면 템플릿 리터럴 앞에 String.raw를 사용한다.

String.raw는 태그 함수라고 부른다.

보간 표현식

템플릿 리터럴 안에는 *플레이스 홀더를 넣을 수 있다.

플레이스 홀더는 ${...}로 표기한다.

 

...에 들어간 부분을 자바스크립트는 표현식으로 간주한다.

이를 활용해서 문자열 안에 변수나 표현식의 결과값을 삽입할 수 있다.

var a = 2, b = 3;
console.log(`${a} + ${b} = ${a+b}`); //2 + 3 = 5
var now = new Date();
console.log(`오늘은 ${now.getMonth()+1} 월${now.getDate()}일입니다.`); //오늘은 8월 2일 입니다.

모든 코드에서 ${} 안에 든 표현식이 평가되어 문자열로 바뀌었다는 사실을 확인할 수 있다.

 

*플레이스 홀더 : 실제 내용물을 나중에 삽입할 수 있도록 일단 확보한 장소라는 뜻이다.