[🐱 자바스크립트] Template literals

backquote 문자열의 장점

(1) 엔터키를 이용해서 출력 가능

var message = `하이?
요?`;

console.log(message) 
// 하이?
// 요?

(2) 변수 바인딩

특히 HTML 작성시 유용하게 사용할 수 있다.

const name = '개구리'
var message = `안녕하세요 저는 ${name}입니다.`;
console.log(message)

(3) tagged literal

ES6 문법에서는 함수 뒤에 소괄호 대신 템플릿 리터럴을 붙여서 실행할 수 있다.

var name = '개구리'

function ten(){
    return 10
}
console.log(ten`안녕하세요 ${name}입니다`) // 10

tagged literal을 사용하면 문자를 해체 분석할 수 있다는 장점이 있다.

예를 들어 단어 순서를 변경하거나, 단어를 제거하거나, ${변수}의 위치를 옮기는 것이 쉽게 가능해진다.

tagged literal을 사용하는 방법은 파라미터를 두 개 담은 함수를 만드는 것이다.

• 첫번째 인자에는 문자들을 array로 만들어 담아준다.
• 두번째 인자에는 ${변수}를 뜻한다.
• 파라미터에 쭉 변수들을 담을 수 있다.

function 해체분석기(문자들,변수들){
    console.log(문자들);
    console.log(변수들);
}

해체분석기`안녕하세요 ${name} 입니다`;

// [ '안녕하세요 ', ' 입니다' ]
// 개구리

다음과 같이 응용할 수 있다!

var name = '개구리'

function 해체분석기(문자들,변수들){
    console.log(문자들[1] +변수들+ 문자들[0]);
}

해체분석기`안녕하세요 ${name} 입니다`;
// 입니다개구리안녕하세요