JavaScript
Mallbokstäver

Introduktion

Syntax

• meddelande = `Välkommen, $ {user.name}!`
• mönster = ny RegExp (String.raw` Välkommen, (\ w +)! `);
• fråga = SQL`INERT INTO Användare (namn) VÄRDER ($ {namn}) `

Anmärkningar

Grundläggande interpolering och multiline strängar

Malllitteraler är en speciell typ av strängbokstav som kan användas istället för standard '...' eller "..." . De deklareras genom att citera strängen med baksida i stället för de enkla eller dubbla citaten: `...` .

Mallbokstäver kan innehålla linjeskador och godtyckliga uttryck kan inbäddas med hjälp av ${ expression } substitutionssyntax. Som standard sammanförs värdena på dessa substitutionsuttryck direkt i strängen där de visas.

const name = "John";
const score = 74;

console.log(`Game Over!

${name}'s score was ${score * 10}.`);

Game Over!

John's score was 740.

Rå strängar

String.raw kan användas med malllitteraler för att få åtkomst till en version av deras innehåll utan att tolka några utsläppssekvenser för backslash.

String.raw`\n` kommer att innehålla ett bakskärning och små bokstäver n, medan `\n` eller '\n' skulle innehålla ett enda nyradstecken.

const patternString = String.raw`Welcome, (\w+)!`;
const pattern = new RegExp(patternString);

const message = "Welcome, John!";
pattern.exec(message);

["Welcome, John!", "John"]

Märkta strängar

En funktion som identifieras omedelbart innan en mall bokstavligen används för att tolka den, i det som kallas en märkt mall letteral . Taggfunktionen kan returnera en sträng, men den kan också returnera någon annan typ av värde.

Det första argumentet till taggfunktionen, strings , är en matris med varje konstant bit av det bokstavliga. De återstående argumenten, ...substitutions , innehåller de utvärderade värdena för varje ${} substitutionsuttryck.

function settings(strings, ...substitutions) {
  const result = new Map();
  for (let i = 0; i < substitutions.length; i++) {
    result.set(strings[i].trim(), substitutions[i]);
  }
  return result;
}

const remoteConfiguration = settings`
  label    ${'Content'}
  servers  ${2 * 8 + 1}
  hostname ${location.hostname}
`;

Map {"label" => "Content", "servers" => 17, "hostname" => "stackoverflow.com"}

strings Array har en speciell .raw egenskap som hänvisar till en parallell Array med samma konstanta delar av mallen bokstavligen men exakt som de visas i källkoden, utan att några utsläpp-utsläpp ersätts.

function example(strings, ...substitutions) {
  console.log('strings:', strings);
  console.log('...substitutions:', substitutions);
}

example`Hello ${'world'}.\n\nHow are you?`;

strings: ["Hello ", ".\n\nHow are you?", raw: ["Hello ", ".\\n\\nHow are you?"]]
substitutions: ["world"]

Templera HTML med mallsträngar

Du kan skapa en HTML`...` mallsträngtaggfunktion för att automatiskt koda interpolerade värden. (Detta kräver att interpolerade värden endast används som text och kanske inte är säkra om interpolerade värden används i kod som skript eller stilar.)

class HTMLString extends String {
  static escape(text) {
    if (text instanceof HTMLString) {
      return text;
    }
    return new HTMLString(
        String(text)
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/\\/g, '&#39;'));
  }
}

function HTML(strings, ...substitutions) { 
  const escapedFlattenedSubstitutions =
      substitutions.map(s => [].concat(s).map(HTMLString.escape).join(''));
  const pieces = [];
  for (const i of strings.keys()) {
    pieces.push(strings[i], escapedFlattenedSubstitutions [i] || '');
  }
  return new HTMLString(pieces.join(''));
}

const title = "Hello World";
const iconSrc = "/images/logo.png";
const names = ["John", "Jane", "Joe", "Jill"];

document.body.innerHTML = HTML`
  <h1><img src="${iconSrc}" /> ${title}</h1>

  <ul> ${names.map(name => HTML`
    <li>${name}</li>
  `)} </ul>
`;

Introduktion

Malllitterarna fungerar som strängar med specialfunktioner. De är omsluten av bakfästet `` och kan spännas över flera rader.

Mallbokstäver kan också innehålla inbäddade uttryck. Dessa uttryck indikeras av ett $ -tecken och lockiga hängslen {}

//A single line Template Literal  
var aLiteral = `single line string data`;


//Template Literal that spans across lines       
var anotherLiteral = `string data that spans
         across multiple lines of code`;     

//Template Literal with an embedded expression
var x = 2;
var y = 3; 
var theTotal = `The total is ${x + y}`;     // Contains "The total is 5" 



//Comarison of a string and a template literal
var aString = "single line string data"
console.log(aString === aLiteral)                         //Returns true

Det finns många andra funktioner i String Literals såsom märkta malllitteraler och rå egendom. Dessa visas i andra exempel.