템플릿 리터럴(Template literal) - 백틱(``)

템플릿리터럴(template literal): `` 백틱을 사용하여 문자열과 변수의 데이터를 쉽게 합쳐줄 수 있다.

일반적으로 변수의 값과 문자열을 합쳐주려고하면 아래와 같이 큰 따옴표와 + 연산자를 사용해야한다.

let won = 1000;

let result = "핫도그의 가격은 " + won + "원 입니다."

console.log(result); // 핫도그의 가격은 1000원 입니다.

이때 띄어쓰기도 신경써야하고 변수와 문자를 합쳐주기위해서 +도 붙여줘야하고 번거롭다.

하지만 템플릿 리터럴을 사용하면 이러한 문제들이 아래와 같이 쉽게 해결할 수 있다.

let won = 1000;

let result = `핫도그의 가격은 ${won}원 입니다.`

console.log(result); // 핫도그의 가격은 1000원 입니다.

아래와 같은 방법으로도 사용이 가능하다.

//추가적인 예시
const data = [
    {
        name: 'person1',
        number: 01012341234,
        item: 'milk'
    }
    ,
    {
        name: 'person2',
        number: 000000111111,
        item: 'orange'
    }
];
const template = `welcome ${data[0].name}`;
console.log(template); // 결과값: welcome person1

추가적으로

태그드 템플릿 리터럴(Tagged template literal)

우리가 일반적으로 함수를 호출할때

function test1() {

console.log('함수 호출');

}

test1();//함수 호출

이렇게 호출해야하는데

function test1() {

console.log('함수 호출');

}

test1``;//함수 호출

이렇게 백틱을 사용하여 호출도 가능하다. 이런것을 Tagged template literal이라고 한다.