Gépirat címkézett sablon húrok

Hogyan használjuk a sablon karakterláncokat függvényként

Az alapok: Sablon húrok

Mielőtt címkézett sablon húrokról beszélnék, más néven sablon literálokról, csak egy rövid bevezetést szeretnék adni általában a sablon húrjairól. Nyugodtan ugorjon a következő fejezetre, ha már tudja, miről van szó.

A sablonhúrok egy speciális típusú karakterlánc-szimbólumok, amelyek tartalmazhatnak Javascript-kifejezéseket, és több soron át is terjedhetnek. Dupla idézőjelek helyett a backtick-karaktereket használják, mivel ez a közös karakterláncok esetében érvényes.

A karakterek több soron átívelését illetően a közös karakterláncnak tartalmaznia kell egy visszafelé mutató perjelet az „n” karakterrel kombinálva egy új sor létrehozásához. A sablon húrjaival egyszerűen létrehozhat egy új sort, úgymond „inline”.

// A common string as reference.
const string = "I'm just a string";

// A template string. For Typescript,
// this value is a plain 'string'-type.
const templateString = `I'm just a string as well`;

A kifejezések elérhetősége egy karakterláncon belül szintén gyorsan megmagyarázható. A sztringszimbólumok megengedése helyett a sablonhúrok tetszőleges kifejezéseket fogadnak el. A következő példa megmutatja, mit értek ez alatt.

function greet(name: string) {
  // Here you see an expression
  // *embedded* inside a string.
  return `Hello, ${name}!`;
}

// "Hello, Tom!"
const greeting = greet("Tom");

// One more example, using
// Typescript's 'rest'-operator
// which allowes any number of values
// and provides them as an array,
// in our case of type 'string'.
function greetAll(...names: string[]) {
  return `Hi everybody: ${names.join(", ")}!`;
}

// "Hi everybody: Tom, Luke!"
const greetingForAll = greetAll("Tom", "Luke");

Címkézett sablon húrok

Önmagában ez a funkciókészlet már jó lenne, de a sablonhúrok funkcióként is használhatók. Egyszerűen csak beilleszt egy kulcsszót a sablon karaktersorozata elé, hogy „megcímkézze”, ezért a „tagged template string” elnevezést. Ideje a következő példának.

// All previous examples used 'untagged'
// string literals, which means they're 
// practially just a string.
//
// But let's see how we can convert them
// to an acutal function:
function merge(template: TemplateStringsArray, ...params: string[]){
  
  // This needs some explanation:
  //
  // 'template', our first param, contains
  // all strings *inbetween the paramters*,
  // you'll see in a minute what I mean by that.
  //
  // 'params' then is an array of strings
  // that were provided as paramteres to the
  // template string.
  
  // Let's ignore the result for now.
  return "";
}

const what = "test";

// Here's the tagged template string in action.
// The tag is the function name, and like a 
// function the tagged template string can be called.
//
// Let's destruct how this will look like
// in the function defined above.
//
// 'template' = ["Just a", ""];
// 'params'   = ["test"]
const result = merge`Just a ${what}`;

// As you can see, the function splits the string
// into the string-only parts and the expressions.

Amint láthatja, a szintaxis elég érdekesnek tűnik, és talán még egy kicsit idegen is, amikor először dolgozott vele. Valószínűleg nincs sok olyan felhasználási eset, amely megkövetelné a címkézett sablon húrok implementálását, de ennek ellenére játszhatunk vele. A következő és utolsó példában néhány esettanulmányt állítottam össze. Mint látni fogja, a címkézett sablonhúrok természetesen használhatók az általános gyógyszerekkel együtt, és érdekes lehetőségeket nyithatnak meg bizonyos követelmények megvalósításához.

// 
// Generic
//
// Tagged template literals can be generic, too.
function generic<T>(template: TemplateStringsArray, ...params: T[]){
    return template.join(",") + params.join(",")
}

// "A value: ,test"
console.log(generic<string>`A value: ${"test"}`);

//
// Generic (with super powers)
//
// You can specify each type and 
// also limit the number of params!
function coalesce<A, B, C>(template: TemplateStringsArray, ...params: [A, B, C]){
    return template.join(",") + params.join(",")
}

// ", - , - ,value,0,true" 
const res = coalesce<string, number, boolean>`${"value"} - ${0} - ${true}`;

//
// Different return type
//
// Also, tagged literal types don't 
// only have to return strings.
const preview = (template: TemplateStringsArray, ...params: number[]) 
  => (template2: TemplateStringsArray, ...params2: string[])
  => {
    return "what?";
}

// Note the two pairs of backticks
// after each other, we're just calling
// the returned tagged template string
// form our first one!
console.log(preview`${0}``${"a"}`);

Remélem, élvezte ezt a meglehetősen gyors kirándulást a Javascript, valamint a Typescript egyik funkciójában. A sablon húrok nagy valószínűséggel gyakori dolog a kódbázisban, a címkézett sablon húrok valószínűleg nem, ezért érdekes többet megtudni az ilyen résfunkciókról.

Javaslatok

Kapcsolódó

Kiegészítés

Nyelvek