ES6 - template literal

template literal

 

template literal은 문자열이다. 

문자열 선언하는 방식은 

var a= 'abc'

var b = "abc"

var c = `abc`

 

a === b

b === c

a === c

 

string literal // 문자 그대로의

 

``은 줄바꿈을 할때 공백을 그대로 출력하기 때문에 주의해야 한다.

var a = 'abc\n' +
    'def'
console.log(a);
//
abc
def

var b = `a
    bb
    ccc`;
console.log(b)

//
a
    bb
    ccc

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

//
10+20=30 10 + 20 = 30

 

상세

 

1) backtick(`)

2) multi - line  = 줄바꿈이 된다.

3) string interporation  = ${a}

 

 

multi-line의 경우 들여쓰기에 주의

const f = function (){
    const a = `abc
    def
    ghij`
    console.log(a);
}
f()
//
abc
    def
    ghij

 

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

 

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()}$`)

 

 

번외 - forEach, map, reduce

forEach

 

 

const a = [ 1, 2, 3 ]
a.forEach(function (v, i, arr) {
    console.log(v, i, arr, this)
}, [ 10, 11, 12 ])

 

map

const a = [ 1, 2, 3 ]
const b = a.map(function (v, i, arr) {
    console.log(v, i, arr, this)
    return this[0] + v
}, [ 10 ])

 

reduce

 

const arr = [ 1, 2, 3 ]
const res = arr.reduce(function (p, c, i, arr) {
  console.log(p, c, i, arr, this)
  return p + c
}, 10)

const arr = [ 1, 2, 3, 4 ]
const str = arr.reduce(function (res, item, index, array) {
  return res + item
}, '')

const arr = [ 'a', 'b', 'c', 'd' ]
const str = arr.reduce(function (res, item, index, array) {
  return res + item
})
console.log(str)

const arr = [ 10, 20, 30, 40, 50 ]
const r = arr.reduce(function (p, c) {
  return p + c
})
console.log(r)

const arr = [ 10, 20, 30, 40, 50 ]
const r = arr.reduce((p, c) => p + c)
console.log(r)

배열의 모든 메소드는 중요한 순서로 나열되어있다.

forEach : for문을 돌리는 거랑 같은 개념.

map :  for문을 돌려서 새로운 배열을 만드는 목적. return 필수

reduce : for문을 돌려서 최종적으로 다른 무언가를 만드는 목적. return 필수

 

 

String.raw

 

문자열이 담긴 배열을 열어보면  raw라는 프로퍼티가 보이는데 이는 strs와 인자가 같다는 것을 볼 수가 있다.

문자열 끝에 \n\n을 추가해서 다시 실행해보자

const tag = function(strs, ...args){
    return {strs: strs, args}
}
const res = tag `순서가 ${1}이렇게 ${2}${3}\n\n`;
console.log(res);

srts는 \n\n없이 문자열의 마지막 인자에 ""

raw라는 프로퍼티에는 문자열의 마지막 인자에 "\n\n"가 추가된 것을 알 수 있다.

 

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

string.raw가 없는 상태에서 문자열을 출력한 것과

string.raw가 있는 상태에서 문자열을 출력한 것을 비교해보면

다음과 같은 결과를 볼 수 있다. 요약하자면 string.raw는 이스케이프 문자 \n를 다음 줄로 바꾸는 것이 아니라

문자열로  출력해준다는 것을 알 수 있다.