Что такое литералы шаблонов в Javascript и почему вы должны их использовать

  • 19 марта, 17:10
  • 2233
  • 0

У JavaScript никогда не было элегантного способа обработки строк до запуска ES6. ES6 представляет нечто, известное как литералы шаблонов, которые позволяют JavaScript обрабатывать несколько строк более эффективно.

Что такое литералы шаблонов в Javascript и почему вы должны их использовать

Синтаксис для литералов 

Шаблонные литералы не предназначены для добавления дополнительных функций в существующие строки JavaScript, но пытаются решить проблему по-новому. Отсюда и введение нового синтаксиса. Вместо использования одинарных или двойных кавычек, вы можете разделять строки с помощью обратных символов (`).

// This is how strings were declared pre ES6
var earlierStrings = 'How strings were declared pre ES6';

// Declaring strings using template literals in ES6
let templateLiterals = `How strings can be declared post ES6`;

console.log(typeof earlierStrings); // "string"
console.log(typeof templateLiterals); // "string"

Шаблонные литералы являются ответом на многострочные строки в JavaScript

Многострочные строки всегда были проблемой до ES6, потому что строки были объявлены с использованием двойных и одинарных кавычек. Это было проблемой, потому что когда вы объявляете строки с помощью двойных или одинарных кавычек, строки должны полностью содержаться в одной. Давайте посмотрим, как разработчики вставляли несколько строк HTML-кода в код JavaScript.

var profile = '' +
    '    <div class="profile">\n' +
    '\n' +
    '        <div class="name">John Doe </div>\n'
    '\n' +
    '        <div class="designation">Web Developer</div>\n'
    '\n' +
    '    </div>\n';

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

let profile = `
<div class="profile">

    <div class="name">John Doe </div>

    <div class="designation">Web Developer</div>

</div>`.trim();

С шаблонными литералами это очень чисто и легко. Функция обрезки используется для удаления пустого пространства перед тегом div и не является обязательной.

Динамическое заполнение данных с использованием шаблонных литералов

Шаблонные литералы - это не просто модный способ объявления строк в ES6. Реальная сила литералов шаблона может быть понята с помощью подстановок. Используя подстановки, вы можете динамически заполнять данные в строках, объявленных с использованием литералов шаблона, так же, как вы могли бы сделать это с помощью движка шаблонов. Давайте посмотрим на следующий пример:

let data = {
    name: 'John Doe',
    designation: 'Web Developer'
}

let profile = `
<div class="profile">

    <div class="name">${date.name}</div>

    <div class="designation">${data.designation}</div>

</div>`.trim();

Замены могут быть использованы для использования следующего синтаксиса ${}, если вы рассмотрите приведенный выше пример кода, то поймете, что подстановки могут содержать выражения JavaScript внутри них. Возможность вычисления выражений JavaScript в подстановках делает их действительно мощными в ES6.

Помеченные шаблонные литералы

Шаблонные литералы могут иметь тег, предшествующий объявлению самого шаблонного литерала. Этот тег действует как обычная функция javascript, которая возвращает массив литералов, а также подстановки внутри самой функции. Литералы и подстановки могут затем использоваться внутри функции и манипулировать ими для получения данных, которые будут действовать как конечный вывод литерала. Давайте сначала объявим литерал шаблона, а затем назначим ему тег.

let data = {
    name: 'John',
    age: '30'
}

let profile = `My name is ${data.name} and I am ${data.age} years old.`

console.log(profile); 
// "My name is John and I am 30 years old."

Это простой шаблонный литерал. Теперь мы можем добавить префикс профиля к новому тегу, который будет действовать как имя функции, а затем мы можем использовать литералы и подстановки внутри функции. 

function tagFunction(literals, ...substitutions){
  console.log(literals);
  // Returns: ["My name is ", " and I am ", " years old."]  

  console.log(substitutions);
  //  Returns: ["John", "30"]
}

let data = {
    name: 'John',
    age: '30'
}

let profile = tagFunction `My name is ${data.name} and I am ${data.age} years old.`

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

function tagFunction(literals, ...substitutions){
 
    return `${literals [0]}Steve${literals [1]}25${literals [2]}`

  }

  let data = {
      name: 'John',
      age: '30'
  }

  let profile = tagFunction `My name is ${data.name} and I am ${data.age} years old.`

console.log(profile);
// "My name is Steve and I am 25 years old."

С использованием tagFunction() в приведенном выше примере мы смогли полностью переопределить строку, возвращаемую литералом шаблона. Это лишь небольшой пример, но он должен дать вам четкое представление о функциональности, которую он добавляет в строки JavaScript.

Источник перевода


0 комментариев
Сортировка:
Добавить комментарий