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.