Template literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.
ES2015 사양명세서에선 template strings라고 불렸습니다.
템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다.

프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.)

Syntax

string text
string text line 1 string text line 2

string text ${expression} string text

tag string text ${expression} string text
템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸줍니다.

위 예시에서 템플릿 리터럴에서 제공하는 기능들을 사용해봤는데 하나하나 알아보도록 하겠습니다.

Expression interpolation (표현식 삽입법)

ES6 이전엔 표현식을 다음과 같이 일반 문자열 안에 집어넣었습니다.

var a = 30;
var b = 2;
var c = "자바스크립트";
var str = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.";
console.log(str); //저는 28살이고 자바스크립트를 좋아합니다.
템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기할 수 있습니다.

let a = 30;
let b = 2;
let c = "자바스크립트";
let str = 저는 ${a+b}살이고 ${c}를 좋아합니다.;
console.log(str); //저는 32살이고 자바스크립트를 좋아합니다.
위 처럼 + 연산자로 문자열을 연결해주는 것보다 가독성이 더 좋습니다.

객체 리터럴

객체 리터럴은 중괄호({})로 묶인 0개 이상인 객체의 속성명과 관련 값 쌍 목록입니다. 문의 시작에 객체 리터럴을 사용해서는 안됩니다. 이는 {가 블록의 시작으로 해석되기 때문에 오류를 이끌거나 의도한 대로 동작하지 않습니다.

아래는 객체 리터럴의 예제입니다. car 객체의 첫째 요소는 myCar 속성을 정의하고 문자열 "Saturn"을 할당합니다. 반면 둘째 요소인 getCar 속성은 function (carTypes("Honda"))을 호출한 결과가 즉시 할당됩니다. 셋째 요소 special 속성은 기존 변수 sales를 사용합니다.

var sales = "Toyota";

function carTypes(name) {
  if (name === "Honda") {
    return name;
  } else {

  }
    return "Sorry, we don't sell " + name + ".";
}

var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };

console.log(car.myCar);   // Saturn
console.log(car.getCar);  // Honda
console.log(car.special); // Toyota

게다가, 속성명으로 숫자나 문자열 리터럴을 사용하거나 또다른 객체 리터럴 내부에 객체를 중첩할 수도 있습니다. 아래 예제는 이 옵션을 사용합니다.

var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda