템플릿 리터럴

템플릿 리터럴 사용법에 관한 간단한 정리를 위하여 작성하는 글이다.

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 객체 리터럴에서의 사용법은 아래와 같다.

const person = {
    name : "kihoon",
    age : "22",
    sayHi(){
        return `Hi, my name is ${this.name} and ${this.age} years old.`
    }
};

console.log(person.sayHi()); // Hi, my name is kihoon and 22 years old.

위와 같이 템플릿 리터럴은 작은 따옴표나 큰 따옴표 대신 백틱(``)을 사용하여 표출한다. ${표현식}을 이용하여 간단한 표현식을 넣는 것도 가능하다. 참고로 템플릿 리터럴 안에서 백틱을 사용하고 싶다면 escape 문자인 백슬러쉬(\)를 사용하면 된다. 

var a = 2;
var b = 3;
console.log("sum = " +(a+b)+", multiple = "+ a*b ); // sum = 5, multiple = 6

위 코드는 템플릿 리터럴을 이용하면 좀 더 직관적으로 아래와 같이도 출력이 가능하다.

var a = 2;
var b = 3;
console.log(`sum = ${a+b}, multiple = ${a*b}`); // sum = 5, multiple = 6