백틱과 함수를 같이 쓰기

tagged literal

 

function taggedLiteral(){
  return 10 
}

taggedLiteral();

// 10

일반적인 함수 모습

 

let name = '지니';
let hello = `안녕하세요 ${name}입니다`;

function taggedLiteral(){
  return 10 
}

taggedLiteral`안녕하세요 ${name}입니다`;

// 10

함수에다 소괄호() 대신 문자열을 붙일 수 있다. 

 

왜 이런 게 생겼을까...?

 

let name = '지니';

function taggedLiteral(text, param){
  console.log(text);
  console.log(param);
}

taggedLiteral`안녕하세요 ${name}입니다`;

// (2) ['안녕하세요 ', '입니다', raw: Array(2)]
// 지니

파라미터를 붙혀주면 백틱 문자를 해체해서 분석해서 떨궈준다. 

이를 활용해서 단어 순서를 변경하거나, 단어를 제거하거나, ${변수} 위치를 옮길 수 있다.

 

해체 기준: ${변수} 양 옆 문자를 잘라서 배열에 넣음 (첫번째 파라미터)

${변수}가 두 개라면, 함수에 3번째 파라미터를 파라미터를 넣으면 그게 두 번째 ${변수}가 됨

 

 

활용해보기

let name = '지니';

function taggedLiteral(text, param){
  console.log(text[1] + param + text[0]);
}

taggedLiteral`안녕하세요 ${name}입니다`;

// 입니다지니안녕하세요