backquote

자바스크립트 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법

" " || ' ' 대신 (키보드 물결기호 를 누르면 나옴) 를 사용 한다.

backquote의 장점

1. 문자 중간 엔터키 가능

var str = 'ㅁㄴㅇㅀ
        ㅇㄴㄹ'   
        // 문자열 깨짐 (html 확인해보셈)

var str =  `ㅁㄴㅇㄹ
        ㅁㄴㅇㄹ`// 문자열 전혀 안깨짐

2. '문자열' 중간에 변수 넣을 수 있다. - ${변수}

var 오늘의 = '주인공';
var str = `오늘의 ${오늘의}은 나야 나`;

Tagged Literals

ES6에서는 tagged literals라고 해서 백틱 기호 안의 문자열을,
함수로 문자 해체분석기능을 만들어 줄 수있다.

var str = 'Luna';

function 함수(str,variable){ // 파라미터는 2개 이상 들어감
  console.log(str)
  console.log(variable)
}

함수`안녕하십니까 ${str} 입니다`;

▲ 함수를 실행시킬 때 소괄호가 아니라
문자를 이용해서 함수를 실행시킬 수 있습니다. 신기하지 않습니꽈!!!~

이것을 실행시키면▼

var str = 'Luna';

function 함수(str,variable){
  console.log(str) // Array(2) 
  console.log(variable) // Luna
}

함수`안녕하십니까 ${str} 입니다`;

첫째 파라미터 문자들은 백틱 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터이고,
둘째 파라미터 변수들은 백틱 내의 ${} 변수를 담는 파라미터이다.

(백틱 내에 변수가 2개 3개다 그러면 파라미터를 뒤에 더 추가해줘야함...)
파라미터 더 추가해 주기 싫다면..

rest파라미터 || arguments(이 파라미터는 다음에 더 자세히 알아보자)

var str = 'Luna';

// ...rest 파라미터
function 함수(...rest){
	console.log(rest)// [Array(2), 'Luna'] 
}

// arguments
function 함수(){
  console.log(arguments) // Arguments(2) [Array(2), 'Luna']
}

함수`안녕하십니까 ${str} 입니다`;

Q. 근데 첫 번째 파라미터가 Array라는 데 뭘 어떻게 만든 Array 일까?

var str1 = 'luna';
var str2 = '나염';
var str3 = '주온';

function 함수(arr,str1,str2,str3){
  console.log(arr);  /* Array(4)
                      0: "우리는 야근을 하는 "
                      1: " 와 빵집"
                      2: " 요거트"
                      3: "입니다옹"*/
	}

함수`우리는 야근을 하는 ${str1} 와 빵집${str2} 요거트${str3}입니다옹`

A. ${} 기호를 기준으로 양옆에 있는 모든 문자 덩어리를 Array안에 '순차적'으로 집어 넣어준다.

그러면

한번 Sample로 해보자

Tagged Literals - Sample

단어 위치 바꾸기

var pants = 20;
var socks = 100;
`양말 ${pants} 바지 ${socks}`
// pants와 socks의 위치를 change 해보자

function 함수(str,var1,var2){
  return str[0] + var2 + str[1] + var1
}
함수() // 양말 100 바지 20

pants = 0, 바지팔렸어요로 바꿔보자

var pants = 0;
var socks = 100;
`바지${pants} 양말${socks}`;

function func(str, var1, var2) {
  if (var1 === 0) {
    var1 = "팔렸어요";
  }

  return console.log(`${str[0] + var1 + str[1] + var2}`);
}
func`바지${pants} 양말${socks}`; //바지팔렸어요 양말 100