[ES6 문법] 템플릿 문자열 (template string)

 

Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다.

 

---

 

 

템플릿 문자열이란

 

- 문자열 안에 변수와 연산식을 혼합하여 사용하는 문자열 리터널

- 작은 따옴표('') 혹은 큰 따옴표("") 대신 백틱 (`) 을 사용해 문자열을 표현함

- 특수 기호 ${} 를 사용해서 변수 또는 식을 포함할 수 있음

 

---

 

템플릿 문자열과 기존 자바스크립트의 문자열 차이

 

기존 자바스크립트의 문자열

    const string1 = "안녕하세요";
    const string2 = "어서오세요";
    const greeting = string1 + " " + string2;​

템플릿 문자열

    const string1 = "안녕하세요";
    const string2 = "어서오세요";
    const greeting = `${string1} ${string2}`
    

    
    const value1 = 1;
    const value2 = 2;
    const result = `곱셈값은 ${value1 * value2} 입니다` ;

1. 템플릿 문자열에 $ 기호를 사용하여 변수를 포함
2. 템플릿 문자열은 엔터를 눌러 줄을 바꾸는 것도 허용
3. 이스케이프 시퀀스를 사용하지 않아도 됨.
4. $ 기호를 사용하면 연산을 포함시킬 수 있다.

이스케이프 시퀀스

- 프로그래밍 언어 특성상 표현할 수 없는 기능, 문자를 표현해줌
- 컴퓨터를 제어하는 목적으로 사용되는 특수한 문자

 

---

 

템플릿 문자열 예제로 마무리

const cart = { name : "도서", price : 1500 };
const getTotal = function(cart){return cart.price + "원"};

const myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)} 입니다`;

console.log(myCart)
=> 장바구니에 도서가 있습니다. 총 금액은 1500원 입니다.