[자바스크립트] tagged literals 사용방법

tagged literals는 문자 해체 분석기능을 말한다. 이것을 사용하면 문자 중간중간에 있는 단어의 순서나 변수를 제거할 때 아주 유용하다. 보다 쉽게 조작할 수 있다. 

 

var 변수 = '손흥민';

function 해체분석기(){
	return 10
}

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

 

해체분석기를 사용하는 방법은 위의 코드와 같이 ``백틱 기호를 함수뒤에 사용하면 된다. 일반적인 함수호출방법은 함수 뒤에 ()괄호를 붙이면 함수를 호출한다. 만약에 문자해체분석기능을 호출하고 싶다면 백틱 기호를 사용하자. 

 

 

 

그럼 본격적으로 문자열 해체전용 함수를 만들어보자. 

var 변수 = '강백호';

function 해체분석기(문자들, 변수들) {
	console.log(문자들) // [안녕하세요, 입니다]
   	console.log(변수들) // [강백호]
}

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

해체 분석기용 함수를 만들려고 할 때는, 파라미터를 주의하자. 

첫번째 파라미터에 있는 '문자들'이라는 어규먼트는 백틱 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터 이다. ${}기호를 기준으로 양 옆에 있는 모든 문자 덩어리들을 배열안에 집어넣는다는 말이다. 

두번째 파라미터에 있는 '변수들'은 백틱 내의 ${} 변수를 담은 파라미터이다. 만약에 백틱내에 변수가 2-3개 이상이다 하면, 갯수만큼 파라미터를 뒤에 추가해주면 된다. 

 

 

예를 하나 들어보자. 

var 변수 = '강백호';

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

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

이렇게 실행하면, 어떤 결과가 출력될까? 먼저 문자들이라는 변수에는 [안녕하세요, 입니다]가 들어있을 것이다. 때문에 문자들[1]은 '입니다'를 말한다. 그렇기 때문에 출력 결과는 '입니다강백호'가 될 것이다.