js - tagged template literal

js - tagged template literal

설명

• template literals 의 더욱 발전된 한 형태는 tagged templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다.
• Tagged Template Literal은 ES6(ES2015)부터 도입된 새로운 문자열 처리 방법인 템플릿 리터럴(Template Literal)을 확장하는 기능으로, 독특한 문법을 통해 개발자들이 더욱 효율적이고 편리하게 코드를 작성할 수 있도록 도와줍니다.

사용법

const taggedTemplateLiteral = (firstParmas, secondParams, thirdParams) => {
    console.log('first : ', firstParmas); // first :  (3) ['', ' is ', ' years old', raw: Array(3)]
    console.log('second : ', secondParams); // second :  Tom
    console.log('third : ', thirdParams); // third :  21
};

const person = 'Tom';
const age = 21;

// tagged template literal
taggedTemplateLiteral`${person} is ${age} years old`;
console.log('first is...', 'variables is variables years old'.split('variables')); // first is... (3) ['', ' is ', ' years old']

• 첫번째 인자로는 ${} 해당하는 변수로 `` 부분을 split() 한 값이 들어갑니다. (string 부분)
  • 예를들어 console.log`Hello ${person}!` 라면
  • ['Hello ', '!’] 가 string 부분이 됩니다.

 

• 잘못된 사용법들

// console.log.`Hello`; // X
// console.log(`Hello``World`); // TypeError: "Hello" is not a function
/*
console?.log
    `Hello` // Uncaught SyntaxError: Invalid tagged template on optional chain
*/

 

• 그 외 사용법

console.log`Hello`; // ['Hello', raw: Array(1)]
console.log.bind(null, 'binding arg')`added arg`; // binding arg ['added arg', raw: Array(1)]

// arguments로 Hello를 넣어서 호출한다.
new Function("console.log(arguments)")`Hello`; // [Arguments] { '0': [ 'Hello' ] }