기존에 알고있었지만 몰랐던 사실이 있어서 정리하는김에 작성해본다.

Template literals

Template literals(이하 템플릿 리터럴)은 내장된 표현식을 허용하는
ES6에서 새롭게 추가된 문자열 선언 방식이다.
기존에 문자열 값을 선언하기 위해서는 큰따옴표""나 작은따옴표''를 사용하여
값을 감싸주었다.
템플릿 리터럴은 백틱을 이용하여 값을 감싸주는 형태이다.
키보드에서 백틱문자 기호는 esc 하단에 위치하고있다.

왜사용해야할까??

만약 내가 작성해야할 문장이 큰따옴표나 작은따옴표를 포함한 문장이라면,
생각지 못한 에러가 발생할 수 있기에 상당한 주의가 필요했다.
예를들어서 I'm awesome!!이라는 문장을 문자열 선언하고싶다면
'I'm awesome!!' 이런식으로 작성을 할것이고, 다음과 같은 에러가 발생한다.

맨앞에 작은따옴표가 I뒤에 작은따옴표를 만나 의도와 다르게 문자열 I만이 문자열 선언이 되버린다.
이러한 경우를 모두 신경쓰면서 문자열 선언을 하는일을 매우 피곤한 일일것이다.

하지만 여기서 템플릿 리터럴(백틱)이 출동하면 어떻게 될까?

백틱으로 값을 감싸게 되면 작은따옴표든 큰따옴표든 상관없이 값을 잘 감쌀 수 있게된다.
이를통해 우리는 앞서 말한 에러 사항을 크게 신경쓰지 않아도 된다.

${} 표현식 삽입법

${}는 변수의 값을 치환해서 표현해준다.
기본적으로 백틱으로 감싸야하며, 다음과같이 활용할 수 있다.

let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

템플릿 리터럴을 이용하면, 더욱 읽기 쉬워진다.
이러한 문법적 기능은 그대로이지만 읽는 사람이 직관적으로
쉽게 코드를 읽을 수 있게 만드는것을 syntactic sugar 라고 하더라..

${} 표현식의 주의할점

오늘 splint 과제를 진행하면서 새로운것을 알게되었다.
그것은 바로 배열을 표현식 ${} 안에 삽입하게되면 배열이 벗겨진다는것이다.
.toString(), String() 메소드도 동일하다.

객체에 대해서도 ${},.toString(), String()의 결과는 동일하다.

새롭게 알게된 사실

${} === .toString() === String()??
내부적인 구조는 다를수도 있으나 현재는 셋다 똑같다고 생각하고있다.