15.Template literals - ES6

---

Template literals : string 을 다르게 제작할 수 있는 ES6 문법임

backtick `` 을 사용해서 문자열을 만들 수 있는 것입니다. (‘ ‘, “ “ 와 같지만 몇가지 장점이 있습니다.)

장점

• enter 키 사용 가능 (복수 열을 사용할 수 있음)

  • 특히 HTML 작성시 유용 (enter key 를 자유롭게 칠 수 가 있음)

• 중간중간 변수를 넣기 쉬움 (문자 중간에 ${} 안에 변수를 담아서 넣을 수 있음)

const variable = 'Son';
const str = `I am ${variable}`

console.log(str)

tagged literal

• 문자를 해체 시켜서..

  • 단어 순서를 변경하거나

  • 단어를 제거하거나

  • ${변수} 위치를 옯기거나

쉽게 할 수 있습니다.

• 방법은 해체분석용 함수를 만든 뒤에 parameter 에서 2개를 설정 하면

  • 첫번째 parameter 는 문자들을 하나씩 array 화 해서 넣어줌

  • 두번째 parameter 는 ${} 를 뜻하면서 그것을 출력해줌

• 만약 변수가 여러가지 일경우는, parameter 에 특정 인자를 추가하면 그 순서대로 출력 함

const name = 'Son';
const str = `I am ${name}`

function tmp(a, b) {
  console.log(a);
  console.log(b);
}

tmp`I am ${name}`

🔶 🔷 📌 🔑

Reference

• poiemaweb - https://poiemaweb.com/js-data-type-variable