tag function

tag function에 tempalte literal을 넘겨주면 첫번째 인자에는 String을 두번째 인자에는 interpolation(${})안에 있는 값들을 넘겨준다.

예시

const tag = (strs, arg1, arg2) => {
    return {
        strs: strs,
        arg1: arg1,
        arg2: arg2
    }
}
const res = tag `순서가 ${1} 이렇게 ${2}`
console.log(res);

//결과값
{ strs: [ '순서가 ', ' 이렇게 ', '' ], arg1: 1, arg2: 2 }

특징

• 무조건 문자열이 interpolation(${}) 보다 하나 더 많다.
  위의 코드를 보면 strs는 마지막에 ''가 하나 더 붙은 것을 알 수 있다.
• 만약 문자열이 3개, interpolation이 2개라면 문자열이 더 많으므로 strs 마지막 요소에 ''는 붙지 않는다.

주의!: tag에 template literal을 넘겨줄때 (),{}을 쓰지 않는다.

---

응용

응용1

const tag = (strs, ...args) => {
    return {
        strs: strs,
        args
    }
}
const res = tag `${1}이렇게${2}`
console.log(res);

위와같이 interpolation은 2개, 그 사이에 Sring이 끼어있는 경우라면 어떨까?
{ strs: [ '', '이렇게', '' ], args: [ 1, 2 ] }

결과는 string이 3개나 된다.

응용2

const tag = (strs, ...args) => {
    return {
        strs: strs,
        args
    }
}
const res = tag `${1}이렇게${2}${3}`
console.log(res);

interpolation을 하나 더 붙이면 어떻게 될까?
{ strs: [ '', '이렇게', '', '' ], args: [ 1, 2, 3 ] }

String이 4개가 된다.

---

왜 이렇게 되는 것일까?

interpolation의 앞뒤에는 무조건 String이 오는걸 가정하기 때문이다.

interpolation 2개

"", ${1}, "이렇게", ${2}, ""

그러므로 String이 3개가 되는 것이다.

interpolation 3개

"", ${1}, "이렇게", ${2}, "" , ${3}, ""

이렇게 4개가 되는 것이다.