🔎 템플릿 리터럴

템플릿 리터럴은 ECMAScript 6부터 추가된 문자열 표현으로 사용하면 표현식의 값을 문자열에 추가하거나 여러 줄의 문자열을 나타낼 수 있다.

사용법

템플릿 리터럴 사용법은 간단하다. 백틱(`)을 써서 문자열로 나타내 줄 수 있다.
그래서 언뜻보면 작은 따옴표(')로 묶인 문자열과 비슷해보인다.

//기본적인 문자열로 나타내기
let str = 'Its time to go';

//템플릿 리터럴로 나타내기
let temStr = `Hello template literal`;

🔎 플레이스 홀더

📌 플레이스 홀더
플레이스 홀더는 실제 내용물을 나중에 삽입할 수 있도록 일단 확보한 장소라는 뜻으로 프로그래밍 언어에서는 실행 시점에 외부에서 주어지는 값을 표현식에 쓸 수 있도록 마련한 장소를 뜻한다.

템플릿 리터럴 안에는 플레이스 홀더를 넣을 수 있다.
플레이스 홀더는 ${ ... }를 사용해 나타낸다.
자바스크립트 엔진은 플레이스 홀더 안에 든 ...부분을 표현식으로 인식하고 평가한다.
이를 활용해서 문자열 안에 변수나 표현식의 결과값을 넣을 수 있다.

let a = 2;
let b = 3;

// +로 문자열 연결 >> 기존 방식
console.log( a + '+' + b + '=' + (a+b)); // 2 + 3 = 5
//문자열 리터럴과 플레이스 홀더를 이용해 연결 
console.log( `${a} + ${b} = ${a+b}` );

let now = now.Date();

// +로 문자열 연결 >> 기존 방식
console.log( '오늘은' + now.getMonth()+1 + '월 ' + now.getDate() + '일 입니다.' );
//문자열 리터럴과 플레이스 홀더를 이용해 연결 
console.log( `오늘은 ${now.getMonth()+1}월 ${now.getDate()}일 입니다.`); //오늘은 

위 예시처럼 ECMAScript 5까지는 문자열에 변수 값을 삽일할 때 (+)연산자로 문자열을 연결하는 방법을 사용했지만 ECMAScript 6에 추가된 문자열 리터럴을 활용하면 더 쉽게 작성할 수 있다.

템플릿 리터럴(template literals)의 더욱 발전된 한 형태는 태그함수(tagged templates)인데 이건 함수를 공부할 때 추가적으로 더 알아보자. 👊