[ES6] 템플릿 문자열 (Template String)

2020.09.16 - [웹 프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴

 

---

 오늘은 가볍게 템플릿 문자열에 대해서 알아보겠습니다. 먼저 기존 자바스크립트의 병합 연산자(+)입니다.

 

var val1 = "코로나";
var val2 = 9;

console.log(val1 + val2); // 코로나9

var val3 = 10;

console.log(val1 + val2 + val3); // 코로나910

console.log(val1 + (val2 + val3)); // 코로나19

 

이처럼 기존 병합 연산자는 플러스 기호를 쓰기 때문에 문자형과 숫자형의 연산이 알아보기 어렵습니다.

또한 문자열 안에 계산식을 넣을 수 없기 때문에 코드가 길어지고 가독성이 떨어집니다. (디버깅 지옥 오픈)

템플릿 문자열은 이러한 단점을 보완합니다. 사용법은 따옴표( ' ' ) 또는 ( " " )가 아닌 백틱( ` ` )을 사용합니다.

 

var text1 = "코로나19";
var text2 = "꺼저버려";

// 기존
console.log(text1 + " " + text2);
// ES6
console.log(`${text1} ${text2}`);

// 기존
console.log("코로나19\n\n역병퇴치");
// ES6
console.log(`코로나19

역병퇴치`); // Enter 줄바꿈 가능

var obj = { name: "코로나", dead: 2020 };

// 기존
console.log("역병 " + obj.name + "의 사망은 " + obj.dead + "년 확정!");
// ES6
console.log(`역병 ${obj.name}의 사망은 ${obj.dead}년 확정!`);

var val1 = 20;
var val2 = 19;

// 기존
console.log("연산식은 " + (val1 + val2) + " 이렇게");
// ES6
console.log(`연산식은 ${val1 + val2} 이렇게`);

var boolVal = true;

// 기존
console.log("조건식은 " + (boolVal ? "참" : "거짓") + " 이렇게");
// ES6
console.log(`조건식은 ${boolVal ? "참" : "거짓"} 이렇게`);

 

 간단하게 템플릿 문자열안에 ${변수명} 또는 ${계산식} 이렇게만 알고 사용하셔도 무방합니다.

다만 템플릿 문자열은 스페이스나 엔터를 전부 인식하기 때문에 그 부분은 주의가 필요합니다.

오늘은 정말 간단하지만 강력한 기능인 템플릿 문자열을 배웠습니다. 그럼 20000

 

정말 참 쉽죠?

 

---

2020.09.21 - [웹 프론트엔드/자바스크립트] - [ES6] 프로토타입 prototype에서 class 클래스로

[ES6] 프로토타입 prototype에서 class 클래스로