Статьи

ECMAScript 6 Power Tutorial: Шаблонные строки

Декабрь 20, 2018

Добро пожаловать во вторую часть моей серии о ECMAScript 6! Один из моих любимых новых веб-стандартов Microsoft Edge , новый движок рендеринга браузеров, который мы создаем в Microsoft, — это обширная поддержка, которую он предлагает для ECMAScript 6. Поэтому я написал эту серию, чтобы познакомить вас с некоторыми интересными вещами, которые вы можете сделать. с ECMAScript 6 при написании больших приложений для Интернета.

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

Решение проблемы возврата строки

Работая над Babylon.js , мне приходится иметь дело с кодом шейдеров, который можно увидеть, для понимания, как большой пакет текста (который выглядит как C).

Вы можете найти пример в этом репозитории GitHub .

Проблема при работе с длинным текстом в JavaScript — возврат строки. Сколько раз вы писали такие вещи?

1
2
3
4
5
6
7
var myTooLongString = «A long time ago, in a galaxy far,» +
                     «far away….» +
                     «It is a period of civil war.»
                     «Rebel spaceships, striking» +
                     «from a hidden base, have won» +
                     «their first victory against» +
                     «the evil Galactic Empire.»;

Когда вам приходится работать с шейдерами длиной более 200 строк, это быстро превращается в настоящую боль.

К счастью, ECMAScript 6 поставляется с новой функцией шаблонных строк. Среди других чудес, строка шаблона напрямую поддерживает многострочные строки:

1
2
3
4
5
6
7
var myTooLongString = `A long time ago, in a galaxy far
far away….
It is a period of civil war.
Rebel spaceships, striking
from a hidden base, have won
their first victory against
the evil Galactic Empire`;

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

Теперь, как разработчики JavaScript, у нас есть три способа определения строк:

  • с «»
  • с »
  • с « (также известный как обратный тик или серьезный акцент)

Так что же с частью шаблона?

Многострочная поддержка — не единственная особенность шаблонных строк. Действительно, вы также можете использовать строки шаблона для замены заполнителей значениями переменных, как вы, возможно, сделали с printf в C / C ++ или string.Format в C #:

1
2
3
4
5
6
7
8
var items = [];
items.push(«banana»);
items.push(«tomato»);
items.push(«light saber»);
 
var total = 100.5;
 
result.innerHTML = `You have ${items.length} item(s) in your basket for a total of $${total}`;

Этот код производит следующий вывод:

1
You have 3 item(s) in your basket for a total of $100.5

Довольно удобно, правда?

Запомните ECMAScript 5:

1
result.innerHTML = «You have » + items.length + » item(s) in your basket for a total of $» + total;

Идем дальше с тегами

Последний этап спецификации строк шаблона заключается в добавлении пользовательской функции перед самой строкой для создания теговой строки шаблона:

01
02
03
04
05
06
07
08
09
10
11
var myUselessFunction = function (strings,…values) {
    var output = «»;
    for (var index = 0; index < values.length; index++) {
        output += strings[index] + values[index];
    }
 
    output += strings[index]
    return output;
}
 
result.innerHTML = myUselessFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

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

В предыдущем примере строки и значения следующие:

  • strings [0] = «У вас есть»
  • значения [0] = 3
  • strings [1] = «товаров в вашей корзине на общую сумму $»
  • значения [1] = 100,5
  • строки [2] = «»

Как видите, каждое значение [n] окружено строками констант (strings [n] и strings [n + 1]).

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

Например, вот фрагмент кода для блокировки строк, которые пытаются внедрить пользовательские элементы DOM:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
var items = [];
items.push(«banana»);
items.push(«tomato»);
items.push(«light saber»);
 
var total = «Trying to hijack your site <BR>»;
 
var myTagFunction = function (strings,…values) {
    var output = «»;
    for (var index = 0; index < values.length; index++) {
        var valueString = values[index].toString();
        if (valueString.indexOf(«<«) !== -1) { // Far more complex tests can be implemented here 🙂
            return «String analyzed and refused!»;
        }
        output += strings[index] + values[index];
    }
 
    output += strings[index]
    return output;
}
 
result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

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

Сырые строки

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

Основная цель — предоставить вам доступ к строке, как она была введена:

01
02
03
04
05
06
07
08
09
10
11
12
13
var myRawFunction = function (strings,…values) {
    var output = «»;
    for (var index = 0; index < values.length; index++) {
        output += strings.raw[index] + values[index];
    }
 
    output += strings.raw[index]
 
    console.log(strings.length, values.length);
    return output;
}
 
result.innerHTML = myRawFunction `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Этот код генерирует следующий вывод:

1
You have 3 item(s) in your basket\n.For a total of $100.5

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

1
result.innerHTML = String.raw `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

Вывод

Microsoft Edge и последние версии Chrome (41+), Opera (28+) и Firefox (35+) поддерживают строки шаблонов, и вы можете отслеживать уровень общей поддержки ECMAScript 6 здесь . Так что, если вы ориентируетесь на современный веб, нет причин не использовать строки шаблонов.

Чтобы получить полное представление о том, какие новые веб-стандарты и функции появятся в Microsoft Edge, например, WebAudio, вы можете просмотреть полный список по адресу dev.modern.ie/platform/status .

Больше практического опыта с JavaScript

Это может вас немного удивить, но у Microsoft есть много бесплатных уроков по многим темам JavaScript с открытым исходным кодом, и мы стремимся создать намного больше с Microsoft Edge . Проверьте мои собственные:

Или серия обучения нашей команды:

И некоторые бесплатные инструменты: сообщество Visual Studio , пробная версия Azure и инструменты кросс-браузерного тестирования для Mac, Linux или Windows.

Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Microsoft Edge и новым механизмом рендеринга EdgeHTML . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows @ http://dev.modern.ie/ .

39
Share: