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

템플릿 리터럴(Template Literal)

ES6부터 새로 도입된 문자열 표기법으로 문자열 생성시 따옴표 대신, 백틱(``)을 사용

ex: const str1 = `hello, world!`;

 

1. 줄바꿈

템플릿 리터럴을 사용하기 전, 즉 기존의 따옴표("") 방식에서는 줄바꿈이 허용되지 않아 이스케이프 시퀀스를 사용해야 했음(ex: \n)

하지만 백틱(`) 리터럴을 사용하면 줄바꿈을 쉽게 표현 가능

위 사진은 크롬의 개발자도구의 콘솔창으로 실습한 화면

특히 str2를 보면 알 수 있듯이 백틱 내에 입력한 문자열은 공백과 개행까지 그대로 표현

- HTML의 pre 태그와 유사

 

2. 표현식 삽입

기존의 따옴표("") 방식에서는 .format()이나 + 연산자로 번거롭게 변수를 삽입해야 했으나,

백틱 리터럴에서는 ${ } 안에 변수를 넣어주는 식으로 간소화

ex: ${name}