JS_기본 문법 (29)_ Tagged Literals

ES6부터는 Tagged Literals 라는 기능을 제공한다. 이에 대해서 알아보자.

 

1. Tagged Literals

Tagged Literals는 문자 해체분석 기능을 함수로 만드는 것을 이야기한다.

이는 template literals를 기반으로 구현할 수 있다.

 

예시

let val = "Korea";

function func(strings, values){
  console.log(strings);
  console.log(values);
}

func`Welcome to ${val}!`

 

위의 예시를 보면

func라는 함수에 백틱( ` )으로 감싸진 문자열을 붙인 것을 볼 수 있다.

이것이 바로 tagged literals 함수를 호출하는 방법이다.

 

tagged literals 함수를 살펴보면 2개의 파라미터를 가지고 있는데

첫번째 파라미터는 백틱 내 순수한 문자들을 변수 기준으로 나누어 Array 형태로 만든 것이고,

두번째 파라미터는 백틱 내 ${}로 감싸져있는 변수를 담는 것이다.

이때 변수가 여러개일 경우에는 여러개의 파라마터를 만들어주거나 rest파라미터를 이용한다!

 

 

예시

let val1 = "Korea";
let val2 = "USA";
let val3 = "Japan";

function func(strings, ...values){
  console.log(strings);
  console.log(values);
}

func`Welcome to ${val1} and ${val2} and ${val3}!`

 

 

이처럼 변수 기준으로 나눈 Array와

여러개의 변수를 담은 Array를 반환하는 것을 알 수 있다.

 

 

이 결과값을 이용하여 문자의 순서를 바꾸어 반환하거나 일부 문자만 추출할수 있다.

 

 

let val1 = "Korea";
let val2 = "USA";
let val3 = "Japan";

function func(strings, ...values){
  console.log(`We are going to ${values[2]} and ${values[1]} this Summer`);
}

func`Welcome to ${val1} and ${val2} and ${val3}!`


--------
"We are going to Japan and USA this Summer"