TIL: 태그 기능/태그된 템플릿 리터럴

개요?

태그된 템플릿 리터럴이라고도 알려진 태그된 함수는 ES6(2015)에 도입된 템플릿 리터럴의 고급 기능입니다. 이를 통해 템플릿 리터럴이 처리되는 방식을 더 효과적으로 제어할 수 있어 사용자 지정 형식 지정, 구문 분석 또는 유효성 검사도 가능합니다.

태그된 템플릿 리터럴의 인기 있는 사용 사례 중 하나는 GraphQL에서 쿼리 문자열을 동적으로 작성하는 것입니다.

---

통사론

정의

태그된 템플릿 리터럴은 "태그 기능"과 템플릿 리터럴의 조합입니다. 태그 함수는 리터럴의 문자열과 보간된 값을 인수로 받아 사용자 정의 처리를 가능하게 합니다.

기본적인 예는 다음과 같습니다.

const bar = "var bar";

function tag(strings, ...values) {
  console.log(strings); // Array of string literals
  console.log(values);  // Array of interpolated values
}

사용방법

tag`foo ${bar} baz`;

// Output:
// ['foo ', ' baz']  // Array of strings
// ['var bar']       // Array of values

---

사용 사례

1. 국제화(i18n)

태그가 지정된 템플릿 리터럴을 사용하면 현지화를 위해 문자열을 동적으로 처리할 수 있습니다.

예:

function i18n(strings, ...values) {
  const translations = {
    "Hello, ": "Hola, "
  };

  return strings.reduce((acc, str, i) => {
    const translatedStr = translations[str] || str; // Translate if possible
    return acc + translatedStr + (values[i] || '');
  }, '');
}

const name = "Alice";
const result = i18n`Hello, ${name}!`;
console.log(result);
// Output: "Hola, Alice!"

2. GraphQL

GraphQL에서 태그된 템플릿 리터럴은 쿼리 문자열을 정의하고 조작하는 데 널리 사용됩니다.

예:

const query = gql`
  query {
    user(id: 1) {
      name
      age
    }
  }
`;

3. 태그된 템플릿 리터럴로 인수 처리

태그된 템플릿 리터럴은 태그 함수에 추가 값을 전달하고 템플릿 리터럴 내에서 함수를 적용하여 인수를 처리할 수도 있습니다.

예:

function tagged(baseValue) {
  return function(strings, ...functions) {
    return strings.reduce((acc, str, i) => {
      const value = typeof functions[i] === 'function' ? functions[i](baseValue) : '';
      return acc + str + value;
    }, '');
  };
}

const result = tagged(2)`foo${n => n * 0}bar${n => n * 1}baz${n => n * 2}`;
console.log(result);
// Output:
// "foo0bar2baz4"

---

토론 및 통찰력?

태그가 있는 템플릿 리터럴을 사용하면 사용자 정의 논리로 동적 문자열 처리가 가능하므로 쿼리 작성, 국제화, 입력 삭제와 같은 사용 사례에 이상적입니다. 특히 고급 문자열 조작이 필요한 시나리오에서 코드 가독성과 유지 관리성이 향상됩니다.

---

참고자료

• MDN 웹 문서: 태그된 템플릿
• ES6 사양
• GraphQL 공식 문서
• 태그된 템플릿 리터럴 の TypeScript推論

위 내용은 TIL: 태그 기능/태그된 템플릿 리터럴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!