자바스크립트 백틱과 따옴표 차이에 대해 알아보자

문자열을 작성할 때 보통은 큰따옴표나 작은따옴표를 사용할 것이다.

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 -1

let calculationDescription  = '(defaultResult + 10) * 3 / 2 -1';

outputResult(currentResult, calculationDescription);

 

위 코드를 보면 6번째 줄에 작은 따옴표로 묶으면 안에 들어가있는 defaultResult값이 문자열로 출력된다.

하지만 defaultResult값을 출력하고 싶다면 이런 방법이 있다.

let calculationDescription  = '(' + defaultResult + ' + 10) * 3 / 2 -1';

 

위 코드를 보면 따옴표로 감싸지 않고 +defaultResult+ 로 적어 자바스크립트가 해당 변수를 찾아 볼 수 있게 만들었다.

+defaultResult+ 에서 + 연산자는 문자열이 아니라 일반적인 연산자로 취급하기 위해서 +를 따옴표 사이에 넣지 않았다.

위 방법을 써도 되지만 조금더 깔끔하게 출력하는 방법이 있다.  바로 백틱을 사용하면 된다.

let calculationDescription  = `( ${defaultResult} + 10) * 3 / 2 -1`;

 

백틱 (``) 즉 ESC키 아래에 보면 물결버튼을 shift누른상태로 누르면 백틱을 쓸 수 있다. 

원하는 문자열을 백틱으로 감싼 후 원하는 변수 또는 상수 등 결과 값을 출력하고 싶은 부분을 ${}로 감싸면 좀더 간단하게 출력할 수 있다.