TIL: Tag-Funktion / getaggte Vorlagenliterale

Übersicht ?

Tagged Functions, auch bekannt als Tagged Template Literals, sind eine erweiterte Funktion von Template-Literalen, die in ES6 (2015) eingeführt wurden. Sie ermöglichen eine bessere Kontrolle darüber, wie Vorlagenliterale verarbeitet werden, und ermöglichen eine benutzerdefinierte Formatierung, Analyse oder sogar Validierung.

Ein beliebter Anwendungsfall für getaggte Vorlagenliterale ist GraphQL zum dynamischen Erstellen von Abfragezeichenfolgen.

---

Syntax

Definition

Ein getaggtes Vorlagenliteral ist eine Kombination aus einer „Tag-Funktion“ und einem Vorlagenliteral. Die Tag-Funktion empfängt die Zeichenfolgen und interpolierten Werte des Literals als Argumente und ermöglicht so eine benutzerdefinierte Verarbeitung.

Hier ist ein einfaches Beispiel:

const bar = "var bar";

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

Verwendung

tag`foo ${bar} baz`;

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

---

Anwendungsfälle

1. Internationalisierung (i18n)

Mit Tags versehene Vorlagenliterale können verwendet werden, um Zeichenfolgen für die Lokalisierung dynamisch zu verarbeiten.

Beispiel:

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

In GraphQL werden getaggte Vorlagenliterale häufig zum Definieren und Bearbeiten von Abfragezeichenfolgen verwendet.

Beispiel:

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

3. Umgang mit Argumenten mit getaggten Vorlagenliteralen

Mit Tags versehene Vorlagenliterale können auch Argumente verarbeiten, indem sie einen zusätzlichen Wert an die Tag-Funktion übergeben und Funktionen innerhalb des Vorlagenliterals anwenden.

Beispiel:

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"

---

Diskussion und Einblicke?

Mit Tags versehene Vorlagenliterale ermöglichen eine dynamische Zeichenfolgenverarbeitung mit benutzerdefinierter Logik und eignen sich daher ideal für Anwendungsfälle wie Abfrageerstellung, Internationalisierung und Eingabebereinigung. Sie verbessern die Lesbarkeit und Wartbarkeit des Codes, insbesondere in Szenarien, die eine erweiterte String-Manipulation erfordern.

---

Referenzen

• MDN-Webdokumente: Mit Tags versehene Vorlagen
• ES6-Spezifikation
• Offizielle GraphQL-Dokumentation
• Tagged Template Literals und TypeScript-Version

Das obige ist der detaillierte Inhalt vonTIL: Tag-Funktion / getaggte Vorlagenliterale. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!