[Javascript ES6] 기초 문법 4. Template Literals, Tagged Literals

 

 

 Template Literals, Backtick

 

백틱기호 ` 를 이용한 문자 표현법을 Template Literals이라고 한다. 문자 중간에 변수의 값을 넣고싶은 경우, ${변수} 를 삽입해주면 된다.

 

let 변수 = '이름'
let 문자 = `문자 중간에 ${변수} 와 같이 변수를 넣을 수 있습니다.`

 

Tagged Literals

1. ${ } 양 옆의 문자들을 배열화 해 준다.

2. 첫번째 파라미터는 문자들을, 두 번째 파라미터부터는 중간에 삽입된 변수를 뜻한다. 만일 변수가 여러개 사용되었을 경우 변수 파라미터를 여러개 넣어주어야 한다.

<script>
    let 변수 = '찰리'
    let 문자 = `안녕하세요 ${변수} 입니다.`

    const taggedLiteral = (문자들, 변수들) => {
        console.log('문자들',문자들)
        console.log('변수들',변수들)
    }

    taggedLiteral`안녕하세요 ${변수} 입니다.`

</script>

이를 이용해 문자열을 편하게 다룰 수 있다.

<script>
    let 변수 = '찰리'
    let 문자 = `안녕하세요 ${변수} 입니다.`

    const taggedLiteral = (문자들, 변수들) => {
        console.log('문자들',문자들)
        console.log('바꿈',문자들[1]+변수들+문자들[0])
    }

    taggedLiteral`안녕하세요 ${변수} 입니다.`

</script>