Template Literals은 ES6에서 추가된 새로운 문자열 선언 방식이다.
기존의 문자열 선언을 하려면
const name = "Dosang"
const hello = "안녕! 나는 " + name + "이라고 해 만나서 반가워!"
console.log(hello) // 안녕! 나는 Dosang이라고 해 만나서 반가워!이런 식으로 값과 값을 +로 합쳐야되지만,
템플릿 리터럴은 빽틱(``)으로 감싸주기만 하면된다.
const name = "Dosang"
console.log(`안녕! 나는 ${name}이라고 해 만나서 반가워!`)
// 안녕! 나는 Dosang이라고 해 만나서 반가워!이렇게 빽틱 안에선 ""를 붙여줄 필요없이 띄어쓰기와 문자열이 나타나고, 변수는 ${}안에 적어주면 된다
위에서 보듯이 두 개의 가장 큰 차이점은 ""과 ``을 쓰냐의 차이이다.
(참고로 백틱은 일반적인 키보드를 기준으로 하면 Tap키 위에 있는 것을 말한다.)
기존의 방식에서 신경을 써야했던 부분은 큰따옴표와 작은따옴표를 쓰는 부분을 신경써야 한다.
예를들어
'Sam Smith - i'm Not The Only One' 부분에서 따옴표 사이에 i'm의 따옴표가 문자열을 끝내버리기 때문이다.
백틱은 문자열 중간에 작은따옴표 큰따옴표의 영향을 받지 않기 때문에 훨씬 편해졌다.
Template Literals은 아직 호환되지 않는 브라우저가 있기때문에 쓰기전에 확인을 한번 해보고 안되는 브라우저에서 쓰고싶으면 babel이라는 컴파일러를 설치해 사용하면 된다.
개발잡