Javascript ES6+ template literal

 

 

 

template literal

 

 

console.log(`a
bb
ccc`)

const a = 10
const b = 20
const str = `${a} + ${b} = ${ a + b }`
console.log(str)

 

• backtick (`) 이라는 문자로 문자를 묶어주면 띄어쓰기, 빈 텍스트, 줄 바꿈 등을 따로 명령어를 사이에 입력을 하지 않아도 실제 타이핑하는 것처럼 표현할 수 있다.
• 또 backtick (`) 안에 있다는 조건하에 ${}로 값을 묶어주면 연산 또한 가능하다.

 

 

 

 

 

 

응용

 

 

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()}$`)
//결과: 
//1 2
//0 $1
//2$

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

 

 

 

 

 

 

console.log(`${[0, 1, 2]}`)
console.log(`${{a:1, b:2}}`)
console.log(`${function(){ return 1 }}`)
console.log(`${(() => 1 )()}` + 1)
//결과:
//0,1,2
//VM935:2 [object Object]
//VM935:3 function(){ return 1 }
//VM935:4 11

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

 

 

 

 

 

console.log(`Foo ${`Bar`}`)
console.log(`Foo ${`Bar ${`Baz`}`}`)
//결과:
//Foo Bar
//Foo Bar Baz

중첩된 backtick은 위와 같이 ${}을 이용하여 묶어주어 처리해야한다.

 

 

 

 

 

 

function a () {
  return `
<div>
    <h1>Lorem ipsum.</h1>
</div>
  `.trim()
}
console.log(a())
console.log(a().replace(/\n/g, ''))

가독성을 위해 trim 으로 처리할 수있다. trim을 사용하며 앞 뒤 불필요한 공백을 삭제해줘 가독성을 더욱 높일 수 있다.

 

 

 

 

 

 

 

 

 

 

template tag function

 

 

const tag = function (strs, arg1, arg2) {
  return {strs: strs, args: [arg1, arg2]}
}
const res = tag `순서가 ${1}이렇게 ${2}`
console.log(res)
// 결과:
//args: (2) [1, 2]
//strs: (3) ["순서가 ", "이렇게 ", "", raw: Array(3)]

 

const tags = function (strings, ...expressions) {
  console.log(strings, expressions)
}
const a = 'iu', b = 'Friday'
const str = tags `Hello, ${a}! Today is ${b}!!`

//결과:
// ["Hello, ", "! Today is ", "!!"]
// ["iu", "Friday"]

 

 

• backtick을 이용한 템플릿 앞에 함수 이름 tag을 붙여주면 함수가 실행된다고 볼 수 있다.
• tag 함수의 첫번째 인자에 '순서가', '이렇게'와 같은 순순한 문자열들의 배열을 넘겨주고 두번째 인자부터는 뒤에 몇 개의 인자가 오든 ${}안의 값들을 넘겨받는다.
• 이때 알아야하는게 문자열이 ${} 보다 1개더 많게 결과가 도출되는 것이다. 위의 결과를 보면 원래 템플릿 안의 문자열은 2개지만 결과 뒤에 ""이라는 빈 문자열이 자동으로 생긴 것을 확인할 수 있다. 원래 하나 더 많다면 생기지 않는다.

 

 

 

string.raw

 

const tag = function (strs, arg1, arg2) {
  return {strs: strs, args: [arg1, arg2]}
}
const res = tag `순서가 ${1}이렇게 ${2} \n\n`
console.log(res)
// 결과:
//args: (2) [1, 2]
//strs: (3) ["순서가 ", "이렇게 ", "↵↵", raw: Array(3)]
//raw: (3) ["순서가 ", "이렇게 ", "\n\n"]

위의 결과 중 raw라는 결과가 따로 또 나오는데 raw의 결과에는 줄 바꾸기 명령을 위하여 입력한 \n 문자 내용 그대로 출력되어 보여지게 하는 특성을 가지고 있다.

 

 

 

아래와 같이 호출할 수도 있다.

const res = String.raw `순서가 ${1}이렇게 ${2}\n\n`;
console.log(res)

//결과:
//순서가 1이렇게 2\n\n

 

 

 

 

 

 

 

심화 응용

 

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)

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

• 위의 예제는 숫자 천단위에 콤마를 찍을 수 있는 코드이다.
• tag 함수인 setDecimalSeperators 함수의 두 번째 인자 '...args'는 ${}안의 숫자들을 가르킨다. reduce 메소드를 이용하여 reduce 메소드 마지막 인자로 ' '을 넣어주어 숫자 값을 문자로 변하게 하였고, .replace 메소드의 (/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,')은 콤마를 찍어주는 정규식 표현이다.
• reduce의 처음 과정은 ' ' + 이 사과는 하나에 +(2000+' ').replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,')부터 시작하여 두 번째 과정은 2,000+ ' ' + 원이고, 총 +(1234567 + ' ').replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,') 세번째 과정은 1,234,567+ ' ' + 개를 구입하시면 총 +(2000*1234567).replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, '$&,')이다.
• 마무리로 '원 이에요.'의 strs[strs.length -1]을 더해주면 된다.