Template Literals

hskwon517·2022년 5월 16일
0
post-thumbnail

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴.
템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공함.
템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됨.

프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었다.

템플릿 리터럴은 "+" 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다.

string text ${expression} string text
=>템플릿 리터럴은 이와같이 백틱으로 감싸준다!

let a = 20;
let b = 8;
let c = "자바스크립트";
let str = 저는 ${a+b}살이고 ${c}를 좋아합니다.;
console.log(str); //저는 28살이고 자바스크립트를 좋아합니다.
=>템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기할 수 있다.

profile
Frontend

0개의 댓글