자바스크립트 템플릿 리터럴 Template Literals

이전에는 템플릿 문자열(Template Strings)로 불렸던, 템플릿 리터럴에 대해 알아보도록 하겠습니다.

 

템플릿 리터럴은 따옴표("") 대신 역따옴표(``)를 사용하여 문자열을 정의합니다. 템플릿 리터럴을 사용하면 문자열 안에 작은따옴표와 큰따옴표를 모두 사용할 수 있습니다.

let text = `Hello World!`;
let text = `언제까지 "Hello World!"만 할 것입니까?`;

템플릿 리터럴에서는 표현식을 삽입할 수 있습니다. ${  }를 사용하면 표현식을 삽입하여 나타낼 수 있습니다.

${...}

var a = 5;
var b = 10;
console.log(`a + b의 결과는 ${a + b} 입니다.`); //a + b의 결과는 15 입니다.

반응형

${  } 안에는 변수나 표현식도 집어넣을 수 있습니다.

let firstName = "길동";
let lastName = "홍";

let text = `안녕하세요 ${lastName} ${firstName}, 님!`;
//'안녕하세요 홍 길동, 님!'

let price = 10;
let VAT = 0.25;

let total = `합계: ${(price * (1 + VAT)).toFixed(2)}`; //'합계: 12.50'