JavaScript/ES6+

ES6+ | Template Literal 템플릿 문자열

pathas 2020. 3. 6. 14:42

Template Literal

ES6에 새로 도입된 문자열 표기법


Template Literal 특징

  • 백틱(``) 사용
  • 내부에 큰따옴표(""), 작은따옴표('') 혼용 가능
  • 여러 줄에 걸쳐 문자열 작성 가능
    줄바꿈을 그대로(enter) 표현할 수 있음
  • 특수 기호 $를 사용해서 변수 또는 식 포함 가능

예제

const t1 = `"안녕"이라고 '안녕'`;
console.log(t1); // "안녕"이라고 '안녕'

const t2 = `줄바꿈을
이렇게 편하게
할 수 있습니다.`
console.log(t2);
/*
줄바꿈을
이렇게 편하게
할 수 있습니다.
*/

const v1 = `제 나이는 `
const v2 = 20;
const t3 = `${v1}${v2}살입니다.`
console.log(t3); // 제 나이는 20살입니다.

ES6에 새롭게 도입된 문자열 표기법인 템플릿 문자열에 대해 알아보았습니다.

편리하게 문자열과 변수를 혼용할 수 있기 때문에 +(문자열 결합 연산자)를 사용하지 않아도 되고,

변수를 사용하는 것을 한 눈에 알 수 있어서 가독성 역시 좋아졌습니다.