JavaScript
Literały szablonów

Wprowadzenie

Składnia

• message = `Witaj, $ {user.name}!`
• pattern = new RegExp (String.raw`Welcome, (\ w +)! `);
• zapytanie = SQL`INSERT INTO Użytkownik (nazwa) WARTOŚCI ($ {nazwa}) `

Uwagi

Podstawowa interpolacja i ciągi wielowierszowe

Literały szablonowe to specjalny rodzaj literału łańcuchowego, którego można używać zamiast standardowych '...' lub "..." . Są one zadeklarowane przez cytowanie ciągu za pomocą znaków odwrotnych zamiast standardowych pojedynczych lub podwójnych cudzysłowów: `...` .

Literały szablonów mogą zawierać podziały wierszy, a dowolne wyrażenia mogą być osadzone przy użyciu składni podstawienia ${ expression } . Domyślnie wartości tych wyrażeń podstawienia są konkatenowane bezpośrednio w ciągu, w którym się pojawiają.

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

console.log(`Game Over!

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

Game Over!

John's score was 740.

Surowe struny

Funkcja znacznika String.raw może być używana z literałami szablonów w celu uzyskania dostępu do wersji ich zawartości bez interpretowania sekwencji specjalnych odwrotnego ukośnika.

String.raw`\n` będzie zawierał ukośnik odwrotny i małą literę n, podczas gdy `\n` lub '\n' będzie zawierać pojedynczy znak nowej linii.

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

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

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

Oznaczone ciągi

Funkcja zidentyfikowana bezpośrednio przed literałem szablonu jest używana do interpretacji, w tak zwanym dosłownym szablonie . Funkcja znacznika może zwrócić ciąg, ale może również zwrócić dowolny inny typ wartości.

Pierwszym argumentem funkcji znacznika, strings , jest tablica każdego stałego fragmentu literału. Pozostałe argumenty ...substitutions zawierają wartości szacowane każdego wyrażenia podstawienia ${} .

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"}

Tablica strings ma specjalną właściwość .raw odwołującą się do równoległego .raw tych samych stałych elementów literału szablonu, ale dokładnie tak , jak pojawiają się w kodzie źródłowym, bez zastępowania ukośnikami odwrotnymi.

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"]

Szablon HTML z ciągami szablonów

Możesz utworzyć funkcję HTML`...` szablonu HTML`...` aby automatycznie kodować interpolowane wartości. (Wymaga to, aby interpolowane wartości były używane tylko jako tekst i mogą nie być bezpieczne, jeśli interpolowane wartości są używane w kodzie, takim jak skrypty lub style).

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

Wprowadzenie

Literały szablonów działają jak ciągi znaków ze specjalnymi funkcjami. Są one otoczone przez tyknięcie zwrotne `` i mogą być rozciągnięte na wiele linii.

Literały szablonów mogą również zawierać wyrażenia osadzone. Te wyrażenia są oznaczone znakiem $ i nawiasami klamrowymi {}

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

Istnieje wiele innych cech literałów ciągowych, takich jak tagowane literały szablonów i surowa właściwość. Pokazano to w innych przykładach.