[JS] 템블릿 리터럴 백틱(`)과 ${ } 달러 표현식

백틱(`)과 ${ } 달러 표현식

기존 출력 구문을 입력할 때에 구문 안에 문자열과 변수를 동시에 작성하려면 "문자열" + 변수 + "문자열" 과 같은 형태로

쌍따옴표와 + 연산자를 이용해 작성해주어야 한다는 번거로움이 존재했다.

 

${ } 달러 표현식은 이러한 번거로움을 줄여주는 명령어로, 백틱(`) 안에 적어서 변수나 연산 등을 삽입할 수 있다.

var name="모카";
document.write("이름은 " + name + "입니다.");
document.write(`이름은 ${name} 입니다.`);

문자열과 변수를 각각 더해서 작성하던 것을 `` 안에 변수만 ${}로 묶어서 작성해주면 된다.

일반 연산, 변수의 연산도 마찬가지로 ${} 안에 작성해 간단히 출력할 수 있다.

 

var name="과자";
var num="3";
var price="1000";

document.write(`${name}를 ${num}봉지 구매하면 가격은 ${num*price}원 입니다!`);
// 과자를 3봉지 구매하면 가격은 3000원 입니다!