JS - 템플릿의 이해

템플릿 문자열(Template Strings)을 이용하면 문자열 안에 변수 삽입이 가능합니다. 보통 문자열은 따옴표로 감싸주게 되는데, 따옴표 대신 백쿼드(`)로 감싸주고, 변수 안에 ${변수} 로 정의하면 템플릿 문자열이 됩니다.

var name = '하보니';
var name2 = `${name} 님`;

<script>
var val1 = "하보니";
var val2 = `안녕 ${val1}`;

console.log(val2);
// 안녕 하보니
</script>

템플릿 문자열의 큰 특징은 개행 문자를 표현하기 위해 \n 를 사용하거나 리터럴(+ 연산자)를 이용해 변수와 문자열을 연결할 수 있었던 것을 아래와 같이 간단하게 표현할 수 있게 되었습니다.

<script>
var val1 = "하보니";
var val2 = `안녕 
    ${val1} 만나서 반가워
  Thank You`;

console.log(val2);
/*
결과:
안녕 
    하보니 만나서 반가워
  Thank You
*/
</script>