Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6
Code

Шаблонные Строки в ES6

by
Difficulty:IntermediateLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

ES6 это будущее JavaScript и оно уже здесь. Это уже готовая спецификация, которая привнесет в язык много новых возможностей, в которых он нуждается, чтобы оставаться конкурентно способным в мире веба. Не все в ES6 для вас, и в этой серии постов я покажу новые очень удобные возможности, которые уже можно использовать.

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

Причина, по которой я предпочитаю одинарные кавычки в том, что так гораздо легче представлять строки HTML с верно закавыченными атрибутами:

Единственный раз когда вам придется их экранировать, это когда вы будете использовать одинарные кавычки в вашем HTML, чтоб случается достаточно редко. Единственное что приходит на ум это однострочный JavaScript или CSS, что означает, что вы, скорее всего пытаетесь сделать что-то отчаянное с вашей разметкой. Даже в ваших текстах, вам вероятно, лучше не использовать одинарную кавычку, но типографски более приятно '.

Отступление: Конечно, HTML достаточно много может нам простить: и опустить кавычки, и использование одинарных кавычек для атрибутов, но я предпочитаю создавать разметку, которую смогут потом прочитать люди, а не полагаться на то что парсер все простит. Мы создали парсер HTML5 таким прощающим, потому что в прошлом люди создавали ужасную разметку, а не для того, чтобы продолжать делать так же.

Я много настрадался с document.write в дни DHTML, при создании документа внутри frameset в новом всплывающем окне и других мерзостей, чтобы некогда больше не использовать экранизирующий символ снова. Порой нам нужны были уже тройные кавычки, и это было еще до того как у нас появились коды цветов. Это был полный бардак.

Подстановка Выражений в Строках?

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

JavaScript не имел такого рода подстановки, поэтому нам приходилось пользоваться конкатенацией строк для достижения такого же результата. Это выглядит довольно громоздким, так как вам нужно постоянно открывать и закрывать кавычки.

Многострочный Беспорядок

Еще более беспорядочно это выглядит при использовании длинных и более сложных строк, особенно когда используется много HTML. И скорее всего ваш инструмент проверки синтаксиса рано или поздно пожалуется вам на замыкающие пробелы после знака + в конце строки. Проблема в том, что в JavaScript нет многострочных строк.

Шаблонные Решения на Стороне Клиента

Для того, чтобы упорядочить этот бардак, который создают конкатенации строк в JavaScript, мы делали то, что всегда делается в таких случаях - мы писали библиотеку. Есть много библиотек для шаблонов HTML и Mustache.js, вероятно самая известная из них. Все они использовали собственный, нестандартизированный синтаксис. Это очень похоже на то, что вы пишете свой контент в Markdown, а затем осознаете, что есть еще много различных интерпретаций значения вашего текста.

Шаблонные Строки

С появлением ES6 и его стандартизации, мы можем наконец обрадоваться что в JavaScript есть новый механизм для управления строками: Шаблонные Строки. Поддержка шаблоных строк в текущих браузерах обнадеживает: Chrome 44 +, Firefox 38 +, Microsoft Edge и WebKit - все на борту. Сафари, к сожалению пока не поддерживает, но скоро и он к ним присоединится.

Гениальность шаблонных строк в том, что они используют новый разделитель строк, который еще не использовался ни в HTML, ни в обычном тексте: обратная кавычка (`);

Используя такой синтаксис у нас теперь появилась возможность использовать подстановки в строках JavaScript:

Конструкция ${} может принимать любое выражение JavaScript, которое возвращает значение. К примеру вы можете производить вычисления или получать доступ к свойствам объекта:

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

Теги Шаблонов

Еще одна вещь, которую можно реализовать с использованием шаблонных строк - добавить к строке название функции, которая будет вызвана, а в качестве параметра получит исходную строку. Например можно кодировать строку для URL-адреса без необходимости прибегать все время к помощи компонента с ужасным именем encodeURIComponent.

Это работает, но полагается на неявное приведение массива к строке. Параметр, переданный в функцию является не строкой, а массивом из строк и значений. Если использовать метод, который я показал здесь, то массив для удобства преобразуется в строку, но более верным способом является прямой доступ к элементам массива.

Получение Cтрок и Значений из Шаблонной Строки

Внутри тег-функции можно помимо самой строки, так же получить значения ее отдельных частей.

Вам также предоставлен массив необработанных строк, что означает, что вы получите все символы в строке, включая управляющие символы. Например, вы добавляете разрыв строки с помощью \n. Вы получите двойной пробел в строке, но и символы \n в исходной строке:

Заключение

Шаблонные строки являются одним из тех небольших плюсов в ES6, который может быть использован прямо сейчас. Если вам нужно поддерживать браузеры старых версий, то всегда можно перевести ваш код из ES6 в ES5; можно проверить на поддержку разных возможностей с помощью библиотеки featuretests.io или следующим кодом:

Вот еще несколько статей о c шаблонных строках:

Больше Практики с JavaScript

Эта статья является частью серии статей по веб-разработки от технических евангелистов Microsoft по практическому изучению JavaScript, open-source проектов и лучших практик, включая Microsoft Edge браузер и новый движок рендеринга EdgeHTML.

Мы рекомендуем вам проверять код во всех браузерах и устройствах, включая Microsoft Edge — браузер по умолчанию для Windows 10 — бесплатными средствами на dev.modern.IE:

Углубленное техническое обучение Microsoft Edge и Web Platform от наших инженеров и евангелистов:

Другие бесплатные кросс-платформенные инструменты ресурсы и для Web Platform:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.