JS) template tag function

template tag function

태그 함수에 template literal를 넘겨주면 첫 번째 인자에는 순수한 string만
다음 인자에는 interpolation(보간 ${})의 값들을 하나 하나 넘겨줍니다.

const tag = function (str, ...args) {
    return { strs: str, args };
}
const res = tag `번호는 ${1}번과 ${2}번 입니다.`
console.log(res);

// { strs: [ '번호는 ', '번과 ', '번 입니다.' ], args: [ 1, 2 ] }

const tags = (strings, ...expressions) => {
  console.log(strings, expressions);
};

const a = "a", b = "b";

const str = tags `Hello, ${a}! Today is ${b}!!`;

// [ 'Hello, ', '! Today is ', '!!' ] [ 'a', 'b' ]

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

응용 1

숫자 세자리 마다 , 를 찍는 template tag Func입니다.

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

// 이 사과는 하나에 2,000원이고, 총 123,456개를 구입하시면 총 246,912,000원 입니다.

응용 2

Map 객체를 생성하고 key와 value 값을 설정하기 위해 set 메서드를 사용해야한다.

const m = new Map();

m.set('key1', 1);
m.set('key2', 2);
m.set('fn', (v => v + 10))

// Map(3) { 'key1' => 1, 'key2' => 2, 'fn' => [Function (anonymous)] }

template tag Func를 사용하여 더 편한게 구현이 가능하다.
설정하고자 하는 key와 value 값을 template literal로 작성하고 tag 함수를 사용하여 key와 value 설정이 가능하다.

const createCollection = {
    Map(keys, ...values){
        const m = new Map()
        values.forEach((val, i) => {
            m.set(keys[i].trim(), val)
        })
        return m
    }
}

const map = createCollection.Map`
    key1 ${1}
    key2 ${2}
    fn ${v => v + 10}
`
// Map(3) { 'key1' => 1, 'key2' => 2, 'fn' => [Function (anonymous)] }