Template literals란?

Template literals:
내장된 표현식을 허용하는 문자열 리터럴
여러 줄로 이뤄진 문자열과 문자 보관 기능을 사용할 수 있다.
`${expression} 문자열` 로 표현이 가능하다.

Template literals 사용 방법

• 이중 따옴표 나 작은 따옴표 대신 백틱을 이용. 두 줄 표현 가능

console.log(`string text line 1
string text line 2`);

• 플레이스 홀더를 이용하여 표현식, 이는 $와 중괄호( $ {expression} ) 로 표기(플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달)

console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);

• 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작 가능.

let output = myTag`that ${ person } is a ${ age }`;

• 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬()를 사용.

`\`` === "`"

변수와 문자열을 표현했을 때 기존

const student = "andy"
const age = 21
const group = "dream"

console.log(student + "는" + age + "세 이고, 소속은" + dream + "입니다.")
// andy는 21세이고, 소속은 dream입니다.

이렇게 계속 + 을 사용해서 표현해줬다.
너무 길어지고 복잡하다.🥺
단락을 나누고 싶지만 나눌 수도 없었다.

Template literals를 만나고

const student = "andy"
const age = 21
const group = "dream"

console.log(`${student}는 ${age}세이고, 소속은 ${group}입니다.`)

이렇게 template literals를 사용한다면, 훨씬 코드를 읽기 편하고 코드를 짰을 +를 여러 번 사용해야하는 수고도 덜 수 있게되었다.