JavaScript - template literal

in JS on 공부, Javascript, Template literal


template literal이란?

그 전에 string이란?

= 문자열이다.

문자열을 선언하는 방법에는

var a = 'abc' //작은따옴표
var b = "abc" //큰따옴표
var c = `abc` //backtick

a === b
b === c
a === c // 다 true이다.

위와 같은 선언 방식을 문자 리터럴이라고 한다. 말그대로 문자열이라는 뜻.

그렇다면 template literal은?

말 그대로 템플릿이라는 소리다.

var a = 'abc\nabc' //이렇게 해야지만 줄바꿈이 되었었다.

var b = `a
bb
cc` //여러줄 문자열이 된다.

var b = `a
    b
    cc` //이러면 앞의 공백까지도 다 포함이 된다.

const a=10
const b=20

const strBefore = a +'+' + b +'=' + {a+b}; //힘들다

const str = `${a} + ${b} = ${a+b}` // ${}안에 값이나 식이 올 수 있다. 문은 안된다. $를 표기하고 싶으면 그냥 $fmf qnxdlaus ehlsek.
  1. backtick ```
  2. multi-line
  3. string interpolation ( ${} ). 문자열 안에 끼워넣기

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

위에서 봤던 예시처럼 공백을 주의하자.

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

문자열이므로 자동으로 toStirng 처리가 된다.

console.log(`${[0,1,2]}`) // 0,1,2

중첨된 backtick 처리

console.log(`Foo ${`Bar`}`) // Foo Bar

가독성 위한 trim 처리

function a(){
  return `
  <div>
    <h1>Lorem</h1>
  <div>
  `.trim()
}

-

  • handlebars
  • mustache
  • jsp
  • php
  • asp

같은 것들을 template language / template engine / template library 라 부른다.

이런애들은 <div class=""> / <html> 이런 태그를 생성해준다.