JavaScript
Литералы шаблонов

Вступление

Синтаксис

• message = `Welcome, $ {user.name}!`
• pattern = new RegExp (String.raw`Welcome, (\ w +)! `);
• query = SQL`INSERT INTO Пользователь (имя) VALUES ($ {name}) `

замечания

Базовая интерполяция и многострочные строки

Литералы шаблонов - это особый тип строкового литерала, который можно использовать вместо стандартных '...' или "..." . Они объявляются путем цитирования строки с backticks вместо стандартных одиночных или двойных кавычек: `...` .

Литералы шаблонов могут содержать разрывы строк, а произвольные выражения могут быть внедрены с использованием синтаксиса подстановки ${ expression } . По умолчанию значения этих выражений подстановки конкатенируются непосредственно в строке, где они отображаются.

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

console.log(`Game Over!

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

Game Over!

John's score was 740.

Необработанные строки

Функция тегов String.raw может использоваться с литералами шаблонов для доступа к версии их содержимого без интерпретации любых escape-последовательностей обратной косой черты.

String.raw`\n` будет содержать обратную косую черту и строчную букву n, тогда как `\n` или '\n' будет содержать только символ новой строки.

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

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

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

Помеченные строки

Функция, определенная непосредственно перед тем, как шаблонный литерал используется для ее интерпретации, в так называемом литер-теге с тегами . Функция тега может возвращать строку, но она также может возвращать любой другой тип значения.

Первый аргумент функции тега, strings - это массив каждого постоянного фрагмента литерала. Остальные аргументы, ...substitutions , содержат оцененные значения каждого выражения ${} подстановки ${} .

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 имеют специальное свойство .raw ссылающееся на параллельный массив одинаковых константных фрагментов литерала шаблона, но точно так же, как они появляются в исходном коде, без .raw .

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

Шаблоны HTML со строками шаблонов

Вы можете создать функцию HTML`...` для автоматического кодирования интерполированных значений. (Для этого требуется, чтобы интерполированные значения использовались только как текст, и могут быть небезопасными, если интерполированные значения используются в коде, таком как скрипты или стили).

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

Вступление

Литералы шаблонов действуют как строки со специальными функциями. Они заключаются в обратную тикку `` и могут быть натянуты на несколько строк.

Литералы шаблонов также могут содержать встроенные выражения. Эти выражения обозначаются знаками $ и фигурных скобок {}

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

Есть много других особенностей струнных литералов, таких как Tagged Template Literals и Raw. Они показаны в других примерах.