JavaScript 템플릿 리터럴

소개

템플릿 문자열 또는 템플릿 문자열이라고도 하는 템플릿 리터럴을 통해 개발자는 문자열 또는 포함된 식을 문자열 형식으로 사용할 수 있습니다.

백틱 구문

템플릿 리터럴은 따옴표("") 대신 백틱( ` ` )을 사용하여 문자열을 정의합니다.

let text = `This is a Template Literal`

템플릿 리터럴을 사용하면 문자열 내에서 작은따옴표('')와 큰따옴표("")를 모두 사용할 수 있습니다.

let text1 = `This is a string with 'single' & "double" quotes in it.`

템플릿 리터럴을 사용하면 인용 부호를 쉽게 포함할 수 있을 뿐만 아니라 코드가 더 깔끔해 보입니다.

// Template Literals also make it easy to write multiline strings.
let text = `Practice
is the key 
to success`

보간

템플릿 리터럴은 변수와 표현식을 문자열에 쉽게 삽입할 수 있는 방법을 제공합니다. 이 방법을 문자열 보간이라고 합니다.
구문은 ${...}

const name = 'Mursal'
console.log(`Hello ${name}`)
// Output => Hello Mursal

const result = 1 + 2
console.log(`$(result < 10 ? 'Less' : 'More'}`)
// Output => More

HTML 템플릿

아래 코드를 살펴보고 출력과 함께 주석을 달자 😜

let header = "Template Literals"
let tags = ["HTML", "CSS", "JavsScript"]

let html = `<h2>${header}</h2></ul>`

for (const tag of tags) {
     html += `<li>${tag}</li>`
}

html += `</ul>`

document.querySelector("body").innerHTML = html