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

  • 19 марта, 15:10
  • 8837
  • 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 комментариев
Сортировка:
Добавить комментарий

IT Новости

Смотреть все