📒 목차

• 📌 Template Literals이란?
• 📌 Syntax
• 📌 참조

---

📌 Template Literals이란?

템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅과 같은 기능들을 제공한다.

이전 ES2015에서는 template strings라고 불렀다.

템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리 및 변환이 된다.

프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하게 발생한다.

이때, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있기에 이와 같은 기능이 생기게 되었다.

템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸준다.

또한, 문자열과 변수를 함께 사용해야 하는 상황에서 유용하게 사용할 수 있다. 왜냐하면, 코드의 가도성이 높으며, 직관적으로 알아볼 수 있기 때문이다.

📌 Syntax

    `string text`

    `string text line 1
     string text line 2`

    `string text ${expression} string text`

    tag `string text ${expression} string text`

const nation = "Korea";

const literal1 = `Hello World`;

const literal2 = `Hello ${nation} World`;

📌 참조

https://eblee-repo.tistory.com/38

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals