Template Literals

Template Literals

 

 

Template Literals란?

• ES6에서 새로 도입된 문자열 표기법
• 백틱(backtick) ` 을 사용
  ┗ 백틱은 키보드에서 숫자 1 왼쪽, tab키 위에 위치했음 / ' (작은 따옴표)와 헷갈리지 말것!
• 여러 줄에 걸쳐 문자열 작성 가능
  └ 줄바꿈을 그대로 표현할 수 있음
• 특수 기호 $를 사용해서 변수 또는 식 포함 가능

 

 

기존 사용 방법

let a = 10;

console.log("a의 값은 " + a + "입니다");

└ 위와 같이 + 를 이용해서 문자열을 이어 붙여 사용

 

 

Template Literals 사용 방법

let a = 10;

console.log(`a의 값은 ${a}입니다);

└ 위와 같이 백틱( ` )을 사용하여 기존 사용 방법과 다르게 +를 이용하지 않고 간단하게 표현이 가능

 

 

let gender = true;

console.log(`나의 성별은 ${gender ? "남성" : "여성"}입니다.`);

└ 이와 같이 자바스크립트 코드인 삼항 연산자를 삽입해서 사용 가능