JavaScript - ES6 템플릿 리터럴(Template literal)

일반 문자열에 표현식을 삽입하거나 태그를 추가할 때 템플릿 리터럴을 사용하면 가독성 좋게 작성할 수 있다.

템플릿 리터럴이란?

내장된 표현식을 허용하는 문자열 리터럴로 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공

• 문법 : 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싼다.

1> 문자열 삽입

• ES6 이전

let name = 'Gary';
let greeting = 'Hi~ my name is ' + name ;

console.log(greeting);		// Hi~ my name is Gary

• 템플릿 리터럴

let name = 'Gary';
const greeting = 'Hi~ my name is ${name}';

console.log(greeting);		// Hi~ my name is Gary

2> 표현식 삽입

• ES6 이전

let a = 1;
let b = 10;
console.log('1 * 10 = ' + (a * b));		// 1 * 10 = 10

• 템플릿 리터럴

let a = 1;
let b = 10;
console.log(`1 * 10 = ${a * b}`);		// 1 * 10 = 10

3> 여러 줄 문자열 생성

• ES6 이전

let text = "안녕, \
난 개리야~ \
반가워 \ ";

• 템플릿 리터럴

let text = `안녕, 
난 개리야~
반가워`;

4> 태그추가

• 템플릿 리터럴

const app = document.querySelector("div#app"); // div#app 태그 선택

const productsData = { title: "감자칩", weight: 300 };

// 템플릿 리터럴과 innerHTML 속성을 사용
app.innerHTML = `<div class="item">상품명 : ${productsData.title}, 무게 ${productsData.weight}g</div>`;