[JavaScript] 템플릿 리터럴 : 백틱(``) 달러(${}) 문법 사용법

*개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

*지속적으로 내용을 수정해 나갈 예정입니다. 혹여나 잘못된 내용이 있다면 언제든지 지적해 주시기 바랍니다!

 

_contents

#1 템플릿 리터럴(Template Literal)

#1.1 템플릿 리터럴 기능1 _ 개행

#1.2 템플릿 리터럴 기능2 _ 표현식

---

#1 템플릿 리터럴(Template Literal)

ES6 부터 새롭게 표기된 문자열 표기법으로 큰따옴표(" ")가 아닌 백틱(` `)을 사용해 문자열을 표기한다.

var str = "Hello JS!"; // 일반 문자열 표기범
var templateStr = `Hello JS!!`; // 템플릿 문자열 표기법
console.log(str);
console.log(templateStr);

[출력결과]
Hello JS!
Hello JS!!

 

#1.1 템플릿 리터럴 기능1 _ 개행

템플릿 리터럴을 사용하면 개행문자('\n') 없이도 개행을 수행할 수 있다.

// 일반 문자열 방식 줄바꿈
var normalStr = "Hello!\nJS";
console.log(normalStr);

// 템플릿 리터럴 방식 줄바꿈
var templateStr = `Hello
JS!`;
console.log(templateStr);

[출력결과]
Hello
JS!

 

#1.2 템플릿 리터럴 기능2 _ 표현식

ES6이전 큰따옴표("")를 이용한 일반 문자열 방식에서 변수나 표현식을 삽입하고자 할 때 + 연산자를 이용하였다.

var num = 1;
var str = " Nov!"
var normalStr = "Hello" + str + num;
console.log(normalStr);

[Output]
Hello Nov!1

 

템플릿 리터럴의 백틱(` `)안에 달러기호${}를 사용하면 변수나 표현식을 표현할 수 있다.

var num = 2;
var str = " Nov!"
var templateStr = `Hello${str}${1}`;
console.log(templateStr);

[Output]
Hello Nov!2