[자바스크립트] Tag Function

tag function이라는 기능이 있다. 그것을 한번 알아보자 일단 예제를 보면서 어떻게 동작하는지 보도록 하자.

const tag = function (strs, arg1, arg2) {
  return {strs: strs, args: [arg1, arg2]}
}
const res = tag `첫번째 ${1}두번째 ${2}`
console.log(res)

예제 코드와 같이 일단 fuction을 하나 선언한다. 그다음 함수 이름을 적고 그다음 템플릿 리터럴(``)을 넘겨주면 첫 번째 인자는 순수 string의 값만 받고, 그다음 두 번째 인자부터는 string interpolation의 값들이 들어온다.

여기서 한 가지 알고 가면 좋은 거 첫 번째 문자열의 인자들은 3개 인 것을 볼 수 있다. 그렇다 첫 번째 문자열의 인자들은 string interpolation의 개수 +1 인 것을 유념하자.

그렇다면 string interpolation의 인자가 많다면 어떻게 해야 할까? 그것은...으로 해결할 수 있다.

const tags = function (strings, ...expressions) {
  console.log(strings, expressions)
}
const a = 'goo', b = 'weon'
const str = tags `Hello, ${a}! and ${b}!!`

 

이제 조금의 응용을 해보자

const addSuffix = function (strs, ...exps) {
  return strs.reduce(function (acc, curr, i) {
    let res = acc + curr + '_suffix '
    if(exps[i]) res += exps[i]
    return res
  }, '')
}
console.log(addSuffix `이 함수는${'각 문자열'}마다${'|_suffix|'}라는 글자를 추가합니다.`)

똑같이 tag function으로 문자열과 string interpolation을 받는데 strs을 reduce 해서 새로운 값을 만들 수 있다. acc로는 '' 빈 문자열이 들어오고 curr에는 현재 strs의 값들이 들어온다. 그다음 현재 index 값인 i로 인해 처음만 보자면 
'' + 이 함수는 + 'suffix'의 res 값이 되고 그다음 exps의 값 '각 문자열' 이 붙는다. 그러면 결과 값이 다음과 같이 나온다.

 

조금 더 다양하게 응용해보자!! 1000마다 ', ' 콤마를 찍어주는 예제이다.

const setDecimalSeperators = function (strs, ...args) {
  return args.reduce(function (p, c, i) {
    return p + strs[i] + (c + '').replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,')
  }, '') + strs[strs.length - 1]
}
const res = setDecimalSeperators `이 사과는 하나에 ${2000}원이고, 총 ${1234567}개를 구입하시면 총 ${2000 * 1234567}원 이에요.`
console.log(res)

 

 

출처

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals