Tagged Literals

: 함수로 문자 해체분석기능을 만들어줄 수 있다!!

보통은 함수이름() 이런 방식으로 함수를 실행하지만,

ES6에서는 함수이름 뒤에 글자를 붙여서 실행시킬 수가 있다. 아래처럼!!

let 변수 = 'Bora';

function 해체분석기(문자들, 변수들){ // 함수를 먼저 만들어주고
  console.log(문자들);
  console.log(변수들);
}

해체분석기`안녕하세요 ${변수} 입니다`; // 여기에주목!

// 콘솔결과
// ["안녕하세요","입니다"]
// Bora

1. 중괄호(변수)를 기준으로 나눈 문자들을 Array화 해준다!

⇒ ["안녕하세요","입니다"]

1. 변수를 여러개 넣고싶으면 파라미터를 추가하면 된다.

function 해체분석기(문자들, 변수, 변수2){ // 함수를 먼저 만들어주고
  console.log(문자들);
  console.log(변수);
  console.log(변수2);
}

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

예제문제!

문제 1. 단어 순서를 바꾸는 해체분석기 제작하기

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

Q. tagged literal 해체분석기를 이용해서 바지, 양말의 단어순서를 바꾸려면 어떻게해야할까요?

풀이

let pants = 20;
  let socks = 100;

  const proto = (a, b, b2) => {
    console.log(`${a[1]}${b} ${a[0]}${b2} `);
  };

  proto`바지${pants} 양말${socks}`;

문제 2. 바지가 0개면 '바지다팔렸어요'라는 문자를 대신 표시해주고 싶습니다.

Q. tagged literal 해체분석기를 이용해서 기능을 만들어보십시오.

풀이

let pants = 0;
  let socks = 100;

  const proto = (a, b, b2) => {
    if (b2 === 0) {
      return console.log(`${a[0]}${b} 양말다팔렸어요`);
    } else if (b === 0) {
      return console.log(`바지다팔렸어요 ${a[1]}${b2}`);
    }
    console.log(`${a[1]}${b} ${a[0]}${b2}`);
  };