[JS ES6]-[8] Template literals / Tagged template 핵심만 이해하기

안녕하세요

이번 글에서는 자바스크립트에서의  Template literals / Tagged template 핵심만 알려드리겠습니다.

 

썸네일

1. Template literals

 

기존에는 “+” 기호로 문자열을 연결해 줘야 했습니다.

var name = 'kim';
var str = "저는 " + name + " 입니다.";
console.log(str);   //저는 kim 입니다.

 

 

그러나 Template literals을 사용하면 backtick( ` ) 기호로 문자열을 이을 수 있습니다.

backtick기호는 키보드 tab 위에 보면 있습니다.

 

그럼 Template literals의 2가지 장점을 볼까요?

 

1.1 변수를 쉽게 집어넣을 수 있음

기존에는 +기호로 변수를 넣어야 했지만 Template literals은 “${}” 기호로 변수를 넣을 수 있습니다.

var name = 'kim';
var str = `저는 ${name} 입니다.`;
console.log(str);   //저는 kim 입니다.

 

2.1 여러줄 작성 쉬워짐

원래 자바스크립트에서 문자열을 여러 줄 작성하려면 개행문자인 \\n 을 넣어줬어야 했습니다.

그러나 Template literals은 엔터키만 치면 됩니다.

const multiline = `This is a
multiline`
console.log(multiline); 
// This is a
// multiline

 

 

2.Tagged template

Tagged template을 이용하면 문자열 처리가 더 쉬워집니다.

함수지만 괄호를 넣는 대신 Template literals을 넣으면 됩니다.

 

let name = 'kim';
let age = 10;

function trans_form(strings, name, age) {
  console.log(strings);  //['my name is ', ' my age ', '',]
  console.log(name);  //kim
  console.log(age);  //10
}

trans_form`my name is ${name} my age ${age}`;

위 코드를 보면 Template literals로 만들어진 문자열을 인자로 받아서 알아서 나누어줍니다.

 

 

첫 번째 파라미터는 백틱내의 문자만 담아 배열로 만들어줍니다. ( “${}” 를 기준으로 양옆에 있는 문자)

두 번째 파라미터는 백틱내의 변수를 순서대로 담습니다.