JavaScript ES6 정리 - Template literal

JavaScript ES6 정리 - Template literal

이번 포스팅에서는 문자열 처리에 관련된 template literal에 대해 알아보자!

template literal

  • backtick (`)
  • string interpolation
  • multi-line
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간 기능을 사용할 수 있습니다.

보간은 어떠한 값들 사이에 다른 값을 넣는다는 의미로 이해하면 된다!

MDN에서는 위와 같이 설명하고 있다. 하지만 역시 잘 와닿지 않는다!

Code를 통해 이해해보자!

backtick (`), string interpolation

const a = 1;
const b = 2;
const str1_ES6_Before = a + " + " + b + " = " + (a + b);
const str2_ES6_After = `${a} + ${b} = ${a + b}`;

/*
Result
1 + 2 = 3
1 + 2 = 3
*/

ES6 이전에는 ’ 또는 "를 활용하여 문자열(문자)을 감싸주었다.

이 표현식은 코드가 길면 굉장히 헷갈려 난감한 기억이 있었다.

ES6에서는 backtick(`)이라고 하는 문자로 문자열 전체를 감싸주고 ${}안에 값을 넣어서 표현할 수 있다.

+로 문자열을 합치는 것보다 훨씬 가독성이 좋다.

multi-line

const test1 = `binary
01.
me`;

const test2 = `binary\n01.\nme`;

const test3 = `binary
               01.
               me`;

위 코드의 각 결과를 예상해보고 실행을 해보자!

모두 같을 것이라고 예상하시는 분들도 있겠지만 test3의 결과만 다르게 출력될 것이다.

backtick를 사용 시, ’ or "를 사용할 때와 달리 공백만큼 띄워서 출력된다는 사실을 잊지 말자.

추가로 template literal의 특징 몇 가지만 더 알아보자.

${ } 내에는 값 또는 식이 올 수 있다

const counter = {
  current: 0,
  step: 1,
  count: function () {
    return (this.current += this.step);
  },
  reset: function () {
    return (this.current = 0);
  },
};
console.log(`${counter.count()} ${counter.count()}
${counter.reset()} $${counter.count()}
${counter.count()}$`);

/*
Result
1 2
0 $1
2$
*/

결국 문자열이므로, 자동으로 toString 처리가 된다

console.log(`${[0, 1, 2]}`);
console.log(`${{ a: 1, b: 2 }}`);
console.log(
  `${function () {
    return 1;
  }}`
);
console.log(`${(() => 1)()}` + 1);

/*
Result
0,1,2
[object Object]
function(){ return 1 }
11
*/

template tag function

const tag = function (strs, arg1, arg2) {
  return { strs: strs, args: [arg1, arg2] };
};
const tagStr = tag`안녕하세요 ${2}진수 입니다! ${1010}`;
console.log(tagStr);

/*
Result
{ strs: [ '안녕하세요 ', '진수 입니다! ', '' ], args: [ 2, 1010 ] }
*/

tag 함수에 문자열을 넣어 원하는 대로(Obj, Array, str 등) 파싱 할 수 있다.

마지막 ${1010} 뒤에도 끝을 의미하는 ''문자가 들어가기 때문에 위 코드에서 strs의 length는 ${}보다 1개 더 많은 것도 확인하자!

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);

/*
Result
이 사과는 하나에 2,000원이고, 총 1,234,567개를 구매하시면 총 2,469,134,000원 이에요.
*/

정규표현식과 tag function을 활용하여 숫자 사이에 ,를 찍어주는 코드다.

코드를 보며 고민해보자!

String.raw

raw라는 말 그대로 원래 들어온 형태 그대로 출력해준다.

console.log(`Hello\nWorld!`);
console.log(String.raw`Hello\nWorld!`);
console.log(String.raw`Hello
World!`);

/*
Result
Hello
World!
Hello\nWorld!
Hello
World!
*/

이스케이스 문자로 처리안하고 문자 그대로 출력해주는 코드이다.

마무리

tag function이나 String.raw를 많이 사용할 것 같지는 않지만 그래도 자주 보며 기억하기 위해 작성해보았다.

다음 시간에는 자주 쓰이는 메소드 forEach, map, reduce와 parameter에 대해 정리할 예정이다!

안뇽 ~ 😛😛

본 포스팅은 인프런 강의 Javascript ES6+ 제대로 알아보기를 공부하며 정리한 포스팅입니다!