Template String(템플릿 문자열)

아주 효율적이고 새로운 방법이며 사용하기 쉬움

사용 방법

예제로 설명하는 방법이 이해가 빨라 적어 봄

  1. 변수에 템플릿 문자열 삽입 후 사용 가능

    let story = `Hello, World! I'm "24"`
    console.log(story) // Hello, World! I'm "24" 출력
    

    위와 같이 변수 뒤에 내용들을 `(grave accent)로 감싸면 공백, 따옴표 등 작성한 그대로 출력할 수 있음

  2. 템플릿 문자열 안에 변수 삽입 가능

    const a = "takeU";
    const b = 24;
    

    ES5에서는 위에서 선언한 상수 a,b를 문자열 안에 출력하려면 아래와 같이 작성했다.

    console.log("Hello " + a + " I'm " + b + " year's old")
    

    보는것과 같이 띄어쓰기도 일일이 해야하고 +로 이어줘야 하므로 번거롭다.
    하지만 ES6는 아주 편하게 할 수 있음.

    console.log(`Hello ${a} I'm ${b} year's old`)
    

    이처럼 `에 넣어주고 변수는 ${}사이에 넣어주면 위와 같은 결과를 얻을 수 있다.
    1번에서 설명한 것과 같이 공백과 따옴표도 그대로 출력이 되어 간단하게 사용할 수 있다!


'개발 > ES6' 카테고리의 다른 글

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

+ Recent posts