Template Literals?

Template Literals는 자바스크립트에서 사용하는 새로운 문자열 표기법이다. 기존의 문자열을 나타내던 따옴표 (" ")(' ') 대신 백틱 (``)을 이용해 문자열을 표기한다.

const age = 13
console.log("저는 "+ age +"살 입니다.") //따옴표 사용
console.log(`저는 ${age}살 입니다.`) //백틱 사용

Template Literals을 왜 사용하나?

1. 줄 바꿈이 쉽다.

const age = 13
const name = "철수"
console.log("저는 "+ age + "살 입니다. \n" + "이름은 "+ name +"입니다.")
console.log(`저는 ${age}살 입니다.
이름은 ${name}입니다.`) //백틱 사용
//결과
//'저는 13살 입니다. 
//이름은 철수입니다.'
//'저는 13살 입니다.
//이름은 철수입니다.'

위의 예시와 같이 enter를 사용한 줄 바꿈이 가능하다.

${}의 사용 (문자열 인터폴레이션(String Interpolation))

const age = 13
console.log(`5년 전 저는 ${age-5}살 이었습니다.`)

${}안에 변수를 넣거나 연산을 넣는 것이 가능하다.

중첩 사용이 가능

const score = 80;
const average = 90;
const result = `${score >= average ? `${score-average} than average` : `-${average-score} than average`}`;
console.log(result);
//결과값
//'-10 than average'

위의 예시처럼 백틱 안에 또 백틱을 사용하여 연산을 포함한 문자열을 깔끔하게 표현할 수 있다.