[JS] 백틱(``)

co_mong·2021년 7월 27일
1
post-thumbnail

1. 템플릿 리터럴

템플릿 리터럴이란 백틱(``)을 의미합니다.

기존에는 템플릿 스트링이라고 불리던 것이 ES6이후 템플릿 리터럴이라고 불리게 되었습니다.

템플릿 리터럴은 문자열과 변수를 함께 사용하기 위해 필요합니다.
템플릿 리터럴이 없을때는 아래와 같이 문자열과 변수를 사용하였습니다.

var age = 99;
console.log("age : "+age);
//age : 99

하지만 템플릿 리터럴을 사용하면 아래와 같이 사용할수 있고 문자열 줄바꿈도 가능합니다.

var age = 99;
console.log(`age :
             ${age}`);
//age : 
//             99

2. 템플릿 태그

탬플릿 태그란 함수에 인자를 넘겨줄때 ()로 넘겨주는 것이 아니라 백틱`` 으로 감싸서 넘겨주는 방식을 의미합니다.

function func(str,...rest){
    console.log(str);
    if(rest[0] === rest[1]){
        console.log(`${rest[0]} == ${rest[1]}`);
    }else{
        console.log(`${rest[0]} != ${rest[1]}`);
    }
    console.log(rest[2]);
}

func`co_mong${99}${99}age${true}`;
//["co_mong","","age",""]
//99 == 99
//true

위의 경우와 같이 템플릿 태그를 사용하면 함수에 인자를 좀더 유연하게 넘겨주는 것이 가능합니다.

인자에서 문자열의 경우 str에 저장되는데 문자열간 ${}가 있는 경우 빈 문자열로 치환되어 저장됩니다.
그리고 ${}로 감싸진 나머지 인자의 경우 rest에 저장됩니다.

아직 다 이해 못함 공부가 더 필요할 듯😡

0개의 댓글