[JavaScript] 문자조작에 유용한 tagged literals

자바스크립트에서 보통 함수를 호출할때 다음과 같은 형태로 호출하곤 하는데, 

함수();

 

이 외에도 자바스크립에서는 특이한 함수 호출법이 있다.

이름하야 tagged literals. 함수 뒤에 관호가 아닌, 텍스트를 넣어서도 함수 호출이 가능하다. 

함수 `안녕하세요 ${변수}입니다`

 

tagged literals를 사용하여, 문자를 해체 분석할수 있다 .

다음 예제를 봐보자.

var name = '손예진'

function 함수(문자들, 변수){
	console.log(문자들);  // (2) ['안녕하세요 저는 ', '입니다', raw: Array(2)]
    console.log(변수);  // 손예진
}

함수 `안녕하세요 저는 ${name}입니다`

함수 뒤 ``(백틱) 안의 문자와 변수를, 함수의 파라미터로 담아 올 수 있는데, 

이를 이용해서, 함수 뒤의 문자와 변수의 순서를 조작하는데 용이하다.

 

# 사용예시

다음과 같은 방식으로 파라미터들의 배열을 바꾸어, 사용이 가능하다! 

! 여러개의 변수를 사용한다면, 변수 갯수만큼 파라미터를 넣어줘야 받아올 수 있다 ! 

var 변수1 = 10;
var 변수2 = 20

// 연필 갯수를 변수2로, 지우개 갯수를 변수 1로 변경하고 싶다면!
function 함수(문자들, 변수1, 변수2){
	console.log(문자들[0], 변수2, 문자들[1], 변수1, 문자들[2]);
}
// 출력결과 >> 연필 :  20 , 지우개 :  10  씩 남았습니다.


함수 `연필 : ${변수1}, 지우개 : ${변수2} 씩 남았습니다.`