JS에서 Template literals가 동작하지 않을 때

Template literals는 ES2015에 추가된 문자열에 변수명을 그대로 사용하게 하는 문법 설탕 (synatatic sugar)이다

 

기존에는 문자열 리터럴에 '(Apostrophe), "(Quotation Mark)를 사용했지만, 

Template literals를 사용하기 위해서는 `(Grave Accent)를 사용해야한다.

 

예를 들어서

 

그레이브 엑센트 대신 아포스트로피를 사용하면 다음과 같은 결과가 나온다.

let name = 'world';
console.log('Hello ${name}');

리터럴로 인식해 그대로 출력하는 걸 볼 수 있다.

 

이번에는 그레이브 엑센트로 사용했을 때이다.

let name = 'world';
console.log(`Hello ${name}`);

원하는 대로 잘 출력된 걸 볼 수 있다.

 

이외에도 다른 기능들이 많으니 MDN을 참고하는 게 좋을 거 같다.

 

Template literals(MDN)