Как написать на клавиатуре обратные кавычки

ES6 в деталях: шаблонные строки

На прошлой неделе я обещал сбавить темп. Я говорил, что после итераторов и генераторов мы возьмёмся за что-нибудь полегче, что-то, что не вынесет вам мозг. Посмотрим, смогу ли сдержать своё обещание.

А пока начнём с чего-нибудь простого.

Обратные кавычки

В ES6 появился новый вид синтаксиса строкового литерала под названием шаблонные строки. Они выглядят как обычные строки за исключением того, что обёрнуты символами обратных кавычек ` вместо обычных кавычек ‘ или » . И в простейшем случае это действительно всего лишь строки.

Но они неспроста называются «шаблонные строки», а не «старые и скучные ничем не примечательные обыкновенные строки, но только с обратными кавычками». Вместе с шаблонными строками в JavaScript появляется простая строковая интерполяция. Иными словами, это способ опрятно и удобно подставлять значения JavaScript в строки.

Их можно применять в миллионах случаев, но моё сердце греет такое скромное сообщение об ошибке:

В этом примере $ and $ называются шаблонными подстановками. JavaScript вставит значения user.name и action в получившуюся строку. Так можно сгенерировать сообщение вроде Пользователю jorendorff не разрешено играть в хоккей. (Что между прочим, правда. У меня нет хоккейной лицензии.)

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

Код в шаблонной подстановке может быть любым выражением JavaScript, так что вызовы функций, арифметика и т.п. разрешены. (Если вы действительно хотите, то можете поместить в шаблонной строке другую шаблонную строку, я это называю шаблонным Началом.)

Если какое-то значение не строкового типа, оно будет приведено к строке при помощи обычных правил. К примеру, если action — объект, у него вызовется метод .toString() .

Если вам нужно использовать символ обратной кавычки в шаблонной строке, её нужно экранировать обратным слэшем: `« — это то же самое, что «`» .

В отличие от обычных строк, в шаблонных строках можно использовать символы переноса строк:

Все пробельные символы в шаблонной строке, включая переносы строк и отступы, включаются «как есть» в результат.

Хорошо. Из-за того, что я пообещал на прошлой неделе, я чувствую свою ответственность за сохранность вашего мозга. Можете прекратить читать прямо сейчас, возможно, пойти выпить чашечку кофе и насладиться своим невредимым мозгом, который все еще находится в вашей черепной коробке. Серьёзно, нет ничего постыдного в том, чтобы отступить. Разве Лопес Гонсальвес ринулся целиком исследовать южное полушарие после того, как доказал, что суда могут пересекать экватор не будучи разбитыми морскими чудищами и не падая с края Земли? Нет. Он повернул обратно домой и хорошенько пообедал. Вам же нравится обедать, верно?

С обратными кавычками в будущее

Давайте поговорим немного о том, чего шаблонные строки не делают.

Они не экранируют автоматически спецсимволы. Чтобы избегать уязвимостей межсайтового скриптинга, вам всё ещё нужно обращаться с ненадёжными данными с осторожностью, точно так же, как при конкатенации обычных строк.

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

Они не замена библиотекам-шаблонизаторам вроде Mustache или Nunjucks.

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

У шаблонных строк в ES6 есть ещё один козырь, который позволяет программистам и разработчикам библиотек не только обойти эти ограничения, но ещё и много чего другого. То, о чём я говорю, называется помеченными шаблонами.

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

Обратите внимание, SaferHTML — это не что-то, что предоставляется стандартной библиотекой. Сейчас мы напишем её сами.

В качестве метки здесь выступает одиночный идентификатор SaferHTML , но меткой также может быть свойство, например SaferHTML.escape , или даже вызов метода, например SaferHTML.escape() . (Если быть совсем точным, любое выражение MemberExpression или CallExpression может быть тегом.)

Мы видели, что шаблонные строки без меток — это краткий способ простой строковой конкатенации. Помеченные шаблоны — это нечто совсем другое, вызов функции.

Код выше эквивалентен такому:

где templateData — это неизменяемый массив всех частей строки в шаблоне, созданный движком JS. В нашем случае в массиве будет два элемента, потому что в помеченной шаблонной строке две части, разделённых подстановкой. Так что templateData будет Object.freeze ([«<p>», » отвесил вам леща.</p>»])

(На самом деле, в templateData есть ещё одно свойство, templateData.raw — это другой массив, содержащий все строковые части шаблона, но на этот раз они в точности в таком виде, в каком они были в исходном коде. Экранирующие последовательности вроде n оставлены в них как есть, вместо того, чтобы превратиться в перевод каретки, ну и тому подобное. Стандартная метка String.raw использует эти сырые строки.)

Это даёт функции SaferHTML свободу интерпретировать как строку, так и подстановки миллионом различных способов.

Прежде чем продолжить чтение, может быть вы захотите попробовать разобраться в том, что SaferHTML должна делать и попробуете вручную её реализовать? В конце концов, это же всего лишь обычная функция. Мы можете проверять, что у вас получается, в консоли разработчика в Firefox.

Вот одно из возможных решений (также доступное как gist).

В таком определении помеченный шаблон SaferHTML`<p>$ отвесил вам леща.</p>` может развернуться в строку «<p>ES6&lt;3er отвесил вам леща.</p>» . Ваши пользователи в безопасности даже если пользователь со зловредным именем вроде Хакер Стив <script>alert(‘xss’);</script> отвесит им леща. Что бы это ни значило.

(Кстати, если такой способ использования функцией объекта arguments кажется вам неуклюжим, заходите на следующей неделе. В ES6 есть ещё одна фича, которая, думаю, вам понравится.)

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

Шаблонные строки не экранируют спецсимволы автоматически. Но, как мы увидели, с помеченными шаблонами вы можете исправить это дело самостоятельно, написав метку.

Вообще говоря, можно делать даже намного лучше.

С точки зрения безопасности моя функция SaferHTML достаточно слабая. В разных местах HTML есть разные спецсимволы, которые нужно по-разному экранировать, и SaferHTML экранирует не все из них. Но приложив небольшое усилие вы могли бы написать намного более умную функцию SaferHTML , которая разбирает куски HTML в строках из массива templateData , чтобы узнать, какие подстановки в простом HTML; какие из них внутри атрибутов и требуют ещё и экранирования ‘ и » ; какие в строке запроса в URL и должны экранироваться как в URL, а не как в HTML; ну и так далее. Она могла бы применять нужное экранирование к каждой подстановке.

Вам кажется, что это оторвано от реальности, потому что разбор HTML медленный? К счастью, строковые части помеченного шаблона не меняются, когда шаблон вычисляется повторно. SaferHTML могла бы кэшировать результаты этого разбора для ускорения будущих вызовов. (Этим кэшем может быть WeakMap, другая функциональность ES6, которую мы обсудим в будущих статьях.)

У шаблонных строк нет встроенных средств для интернационализации. Но с метками мы можем их добавить.

Статья Джека Хсу (Jack Hsu) демонстрирует первые шаги к тому, как это будет выглядеть. Один пример для привлечения внимания:

Заметьте, что в этом примере name и amount — JavaScript, но есть ещё и немного незнакомого кода, вот это :c(CAD) , которое Джек помещает в строковую часть шаблона. JavaScript, само собой, обрабатывается движком JavaScript, строковые же части обрабатываются написанной Джеком меткой i18n . Из документации пользователь может узнать, что :c(CAD) обозначает, что amount — это количество валюты, переведённое в канадские доллары.

Вот, для чего и нужны помеченные шаблоны.

Шаблонные строки не заменяют Mustache и Nunjucks, отчасти из-за того, что в них не встроен синтаксис для циклов и условий. Но теперь-то мы начинаем видеть, как это можно исправить, верно? Если в JS нет какой-то функциональности, можно написать метку, которая её реализует.

Гибкость этим не ограничивается. Заметьте, что аргументы функции-метки не приводятся автоматически к строкам. Они могут быть чем угодно. То же самое касается и возвращаемого значения. Помеченные шаблоны даже не обязательно должны быть строками! Вы можете использовать собственные метки, чтобы создавать регулярки, деревья DOM, изображения, промисы над целыми асинхронными процессами, структуры данных JS, шейдеры GL…

Помеченные шаблоны призывают разработчиков библиотек создавать мощные предметно-ориентированные языки. Эти языки могут быть вообще непохожими на JS, но при этом встраиваться в JS как влитые и разумно взаимодействовать с остальным языком. Я сходу не могу вспомнить ничего подобного в других языках. Я не знаю, к чему эта возможность нас приведёт. Возможности потрясающие.

Когда можно начинать этим пользоваться?

На сервере шаблонные строки поддерживаются в io.js уже сегодня.

Из браузеров их поддерживает Firefox 34+. В Chrome поддержка зависит от настройки «Экспериментальный JavaScript», которая по умолчанию выключена. Пока что, если вы хотите применять шаблонные строки в вебе, нужно пользоваться Babel или Traceur. Вы также можете использовать их прямо сейчас в TypeScript!

Подождите! А что насчёт Markdown?

Ой. …Хороший вопрос.

(Этот раздел не про JavaScript. Если вы не пользуетесь Markdown, можете смело его пропускать.)

С появлением шаблонных строк выходит, что и Markdown и JavaScript теперь используют один и тот же символ ` для обозначения чего-то особенного. Фактически, в Markdown это разделитель кусков кода посреди обычного текста.

А вот тут небольшая проблема! Если вы напишете в документе Markdown так:

то оно отобразится как:

Чтобы показать сообщение, напишите alert( hello world! ) .

Заметьте, на выходе нет обратных кавычек. Markdown интерпретировал все четыре обратные кавычки как разделители кода и заменил их на теги HTML.

Чтобы обойти эту напасть, мы обратимся к одной малоизвестной возможности, которая была в Markdown с самого начала: вы можете использовать несколько обратных кавычек как разделители кода, вот так:

В этом Gist все подробности на эту тему, и он написан на Markdown, так что вы можете посмотреть на исходник.

Что дальше

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

Мы посмотрим на них глазами человека, который реализовал их в Firefox. Так что пожалуйста присоединяйтесь к нам на следующей неделе, и наш приглашённый автор Бенджамин Петерсон (Benjamin Peterson) представит в деталях параметры по умолчанию и остаточные параметры из ES6.

Использование символа backtick (`) в JavaScript

В JavaScript обратный тик †, кажется, работает так же, как одиночная кавычка. Например, я могу использовать обратную косую черту, чтобы определить такую ​​строку:

Есть ли способ, которым поведение backtick на самом деле отличается от поведения одиночной кавычки?

† Обратите внимание, что среди программистов «backtick» — это одно из названий того, что обычно называют серьезным акцентом . Программисты также иногда используют альтернативные имена «backquote» и «backgrave». Кроме того, в переполнении стека и в других местах другие распространенные варианты написания слов «backtick» — это «back-tick» и «back tick».

Они назывались «шаблонными строками» в предыдущих выпусках спецификации ECMAScript 2015.

Шаблонные литералы поддерживаются в Firefox 34, Chrome 41 и Edge 12 и выше, но не в Internet Explorer.

• Примеры: http://tc39wiki.calculist.org/es6/template-strings/
• Официальная спецификация: ECMAScript 2015 Спецификация языка, 12.2.9 Шаблон Буквенные Лексические Компоненты (немного суховато)

Шаблонные литералы могут использоваться для представления многострочных строк и могут использовать «интерполяцию» для вставки переменных:

Что более важно, они могут содержать не только имя переменной, но и любое выражение JavaScript:

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

Как вы можете видеть, мы использовали ` вокруг серии символов, которые интерпретируются как строковые литералы, но любые выражения формы $ <..>анализируются и оцениваются внутри строки немедленно.

Одним из действительно приятных преимуществ интерполированных строковых литералов является то, что им разрешено разбивать несколько строк:

Интерполированные выражения

Любое допустимое выражение может появляться внутри $ <..>интерполированного строкового литерала, включая вызовы функций, вызовы встроенных выражений функций и даже другие интерполированные строковые литералы!

Здесь, внутренний `$s` интерполированный строковый литерал был немного более удобным для нас при объединении who переменной со «s» строкой, в отличие от who + «s» . Также, чтобы сохранить примечание, интерполированный строковый литерал просто лексически ограничен, где он появляется, а не динамически ограничен каким-либо образом:

Использование литерала шаблона для HTML определенно более читабельно за счет уменьшения раздражения.

Простой старый способ:

• Ваша строка может занимать несколько строк.
• Вам не нужно избегать кавычек.
• Вы можете избежать группировок, таких как: «»> ‘
• Вам не нужно использовать оператор плюс.

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

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

Здесь мы можем использовать оператор распространения для передачи нескольких значений. Первый аргумент — мы назвали его строками — это массив всех простых строк (вещи между любыми интерполированными выражениями).

Затем мы собираем все последующие аргументы в массив, называемый значениями, используя . gather/rest operator , хотя вы, конечно, можете оставить их как отдельные именованные параметры после параметра строк, как мы делали выше ( value1 , value2 и т. Д.).

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

Сырые строки

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

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

Шаблонные литералы заключены в обратные кавычки (` `) вместо двойных или одинарных. Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками ( $ ). Выражения в подстановках и текст между ними передаются в функцию. По умолчанию функция просто объединяет все части в строку. Если перед строкой есть выражение (здесь это tag ), то шаблонная строка называется «теговым шаблоном». В этом случае, теговое выражение (обычно функция) вызывается с обработанным шаблонным литералом, который вы можете изменить перед выводом. Для экранирования обратной кавычки в шаблонных литералах указывается обратный слеш .

Многострочные литералы

Символы новой строки являются частью шаблонных литералов. Используя обычные строки, вставка переноса потребовала бы следующего синтаксиса:

То же с использованием шаблонных литералов:

Интерполяция выражений

Для вставки выражений в обычные строки вам пришлось бы использовать следующий синтаксис:

Теперь, при помощи шаблонных литералов, вам доступен «синтаксический сахар», делающий подстановки вроде той более читабельными:

Вложенные шаблоны

Временами, вложить шаблон — это кратчайший и, возможно, более читабельный способ составить строку. Просто поместите внутрь шаблона с обратными кавычками ещё одни, обернув их в подстановку $ . Например, если выражение истинно, можно вернуть шаблонный литерал.

В ES2015 с шаблонными литералами без вложения:

В ES2015 с вложенными шаблонными литералами:

Теговые шаблоны

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

Функция тега не обязана возвращать строку, как показано в примере ниже:

Сырые строки

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

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

Теговые шаблоны и экранирование символов

Поведение в ES2016

В ECMAScript 2016 теговые шаблоны следуют правилам экранирования следующих символов:

• символы Unicode, начинающиеся с «u», например, u00A9
• точки кода Unicode, начинающиеся с «u«, например, u
• шестнадцатеричные представления символов, начинающиеся с «x», например, xA9
• восьмеричные представления символов, начинающиеся с «», например, 251 ​​​​​​

Отсюда вытекает проблема теговых шаблонов: следуя грамматике ECMAScript, анализатор кода, найдя символ , будет искать корректное представление символа Unicode, но может не найти его вовсе. Пример ниже показывает это:

Поведение в ES2018

Теговые шаблоны должны позволять встраивать языки (например, DSLs или LaTeX), в которых широко используются многие другие экранирования. Предложение Редакция шаблонных литералов (уровень 4, одобренный к добавлению в стандарт ECMAScript 2018) устраняет синтаксические ограничения экранирования теговых шаблонов в ECMAScript.

Однако, некорректное экранирование символов по-прежнему нужно отображать в «приготовленном» отображении. Оно показывается в виде undefined в «приготовленном» массиве:

Заметьте, что ограничение на экранирование символов проявляется лишь в теговых шаблонах, и не проявляется в нетеговых шаблонных литералах: