ES6 - 템플릿 문자열 사용하기 `

템플릿 문자열을 사용하면 문자열 연결을 대신 사용할 수 있다. 

 

---

기존 방식

변수명 + 변수명 + 변수명 을 통해서 문자열을 연결하였다. 

let lastName = "lastName"
let firstName = "firstName"
let middleName = "middleName"

console.log(lastName + " , " + firstName + " , " + middleName )

결과) 

lastName , firstName , middleName

 

---

템플릿에서는 ${}를 사용해서 문자열 안에 변수를 넣을 수 있다. 

let lastName = "lastName"
let firstName = "firstName"
let middleName = "middleName"

console.log(`템플릿 방식 : ${lastName} , ${firstName} , ${middleName} `)

결과) 

템플릿 방식 : lastName , firstName , middleName 

 

---

템플릿 문자열은 공백( 탭, 개행 문자 등 ) 을 유지한다. 

let htmlContents = `
<section>
	<header>
    	<h1>IT 삽질</h1> 
    </header>
</section> 
`

console.log(htmlContents);

결과) 

<section>
	<header>
    	<h1>IT 삽질</h1> 
    </header>
</section>