Tikskrif gemerk sjabloonstringe

Die basiese beginsels: Template Strings

Voordat ek praat oor gemerkte sjabloonstringe, ook genoem sjabloonletters, wil ek net 'n vinnige inleiding gee tot sjabloonstringe in die algemeen. Spring gerus na die volgende hoofstuk as u reeds weet waaroor dit gaan.

Sjabloonstringe is 'n spesiale tipe stringsimbole wat Javascript-uitdrukkings kan bevat en oor verskeie lyne kan strek. Hulle gebruik die backtick-karakters in plaas van dubbele aanhalings, soos dit die geval is met gewone snare.

Wat die verspreiding van karakters oor meerdere reëls betref, moet 'n gewone string 'n terugslag hê in kombinasie met die karakter 'n 'om 'n nuwe reël te skep. Met sjabloonstringe kan u so te sê eenvoudig 'n nuwe reël 'inline' skep.

// 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`;

Die beskikbaarheid van uitdrukkings binne 'n string kan ook vinnig verduidelik word. In plaas daarvan om snaar simbole net toe te laat, aanvaar sjabloonstringe willekeurige uitdrukkings. Die volgende voorbeeld toon wat ek daarmee bedoel.

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");

Gemerkte sjabloonstringe

Hierdie stel funksies alleen sou al lekker wees, maar sjabloonstringe kan ook as funksies gebruik word. U plaas eenvoudig 'n sleutelwoord voor die sjabloonstring om dit te "tag", vandaar die naam "tagged template strings". Tyd vir die volgende voorbeeld.

// 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.

Soos u kan sien, lyk die sintaksis redelik interessant en miskien selfs 'n bietjie vreemd as u eers daarmee werk. Daar is waarskynlik nie baie gebruiksgevalle wat vereis dat u gemerkte sjabloonstringe implementeer nie, maar ons kan nietemin daarmee speel. In die volgende en laaste voorbeeld het ek 'n paar gevallestudies saamgestel. Soos u sal sien, kan gemerkte sjabloonstringe natuurlik met generiese produkte gebruik word en 'n paar interessante opsies oopmaak vir die implementering van sekere vereistes.

// 
// 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"}`);

Ek hoop dat u hierdie redelike vinnige uitstappie in een van Javascript sowel as Typescript se funksie geniet het. Sjabloonstringe is heel waarskynlik 'n algemene ding in u kodebasis, gemerkte sjabloonstringe waarskynlik nie, daarom is dit interessant om meer te wete te kom oor sulke nisfunksies.