# Супер Строки (Шаблонные Строки)
ES6 знакомит нас с новым типом строк — Шаблонные Строки (Template Literals.). Я предпочитаю называть их Супер Строками. Супер Строку нужно использовать как обычную строку, но вместо одинарных или двойных кавычек используется обратная кавычка.
|
1
2
3
4
5
6
7
|
var q = ‘foo’;
var qq = «foo»;
var bq = `foo`;
var qq = «Sally sells \»sea shells\»»;
var bq = `Sally sells «sea shells»`;
|
Пока все неплохо, но отличия незначительные. Тут есть одно непосредственное преимущество. Если вам нужно использовать двойные или одинарные кавычки внутри строки, вам не придется больше их избегать. Однако, супер строки имеют несколько других трюков в запасе.
МНОГОСТРОЧНЫЕ СТРОКИ
Наконец, появились реальные многострочные строки. Вы подумаете может несколько строк нужно оборачивать в кавычки? Вам не нужно избегать новых строк или как-то их соединять. Просто положите всё прямо в новые строки и все заработает.
|
1
2
3
4
5
6
7
|
var qq = «this is a very long»
+ » piece of text that goes over several lines»
+ » and would require silly hacks»;
var bq = `this is a very long
piece of text that goes over several lines
and would require silly hacks`;
|
ИНТЕРПОЛЯЦИЯ ВЫРАЖЕНИЙ (EXPRESSION ESCAPING)
Еще одна новая фича — это expression escaping. В супер строку можно положить ${} с любым валидным JavaScript выражением внутри квадратных скобок. Это намного красивее, чем двойные кавычки, а последняя среда разработки (IDEs) будет красиво подсвечивать синтаксис этих выражений.
|
1
2
3
4
5
|
var name = «Alice»;
var greeting = `Good morning ${name}`;
var amount = 5;
var price = 3;
var sales = `That costs ${amount*price} dollars`;</pre>
|
Комбинирование expression escaping с поддержкой многострочных строк дает нам классные HTML шаблоны .
|
1
2
3
4
5
6
7
8
9
|
var template = `
<div>
<h3>Good Morning ${name}</h3>
<p>
That item will cost you
<b>${amount*price}</b>
dollars.
</p>
</div>`
|
# Стрелочные функции (Arrow Functions)
Давайте теперь взглянем на функции. Если вы слышали что-нибудь о ES6 раньше, то скорее всего, в это было про стрелочные функции. Этот другой синтаксис для написания регулярных функций, но с более компактным синтаксисом. У них есть одно очень важное отличие: переменная this означает кое-то другое. Давайте посмотрим на код.
Предположим, вы хотите выполнить цикл через массив, чтобы удвоить значения в нем, создав новый массив. Вы могли бы сделать это со следующим циклом for, но это создаст дополнительные переменные и это может легко сломаться или будет получен неправильный индекс. плюс много придется печатать.
|
1
2
3
4
|
var output = [];
for(var i=0; i<;input.length; i++) {
output[i] = input[i] * 2;
}
|
У массивов в JavaScript есть метод map, который вызывает функцию для каждого элемента, чтобы создать новый элемент, который затем помещают в новый массив. Как это работает:
|
1
2
3
|
var output = input.map(function(x) {
return x * 2;
});
|
Это выглядит хорошо, но было бы неплохо сделать код короче Часть x*2 — это единственная вещь, которая реально работает. Все остальное синтаксическую нагрузку. Со стрелочной функцией мы можем записать это так:
|
1
|
var output = input.map((x)=>x*2);
|
Вау! Это намного короче. Сейчас объясню что произошло. Стрелочная функция позволяет переписать функцию без фактического слова function. Вместо этого вы ставите знак => после скобок, содержащих параметры функции.
|
1
2
3
4
5
6
7
8
|
//обычная функция
function (x) {
return x * 2;
}
//стрелочная функция
(x) => {
return x * 2;
}
|
Стрелочные функции позволяют писать короче. Но мы можем еще больше сократить этот код. Давайте удалим пробел. Тот же код, только короче:
|
1
|
(x) => { return x * 2; }
|
Есть вариант еще короче. Если стрелочная функция содержит только одно выражение, то мы можем удалить return, фигурные скобки и точку с запятой, что в результате даст нам крошечный выражение в одну строку, которая автоматически возвращает значение. Это намного лучше.
|
1
2
|
(x) => x * 2
var output = input.map((x)=>x*2);
|
Стрелочные функции могут сделать ваш код очень компактным и мощным. Но есть еще один трюк. Он исправляет контекст (this).
ПРОКЛЯТИЕ THIS
В JavaScript волшебная переменная this всегда ссылается на объект, из которого вызывается функция. Поэтому следующий код не делает то, чего вы ожидаете.
|
1
2
3
4
5
6
7
|
function App() {
this.clicked = false;
var button = document.getElementById(‘button’);
button.addEventListener(‘click’, function(evt) {
this.clicked = true; //не сделает того, чего вы ожидаете
});
}
|
Когда вы используете другие объекты контекст this может быть иным в отличие от того, что вы ожидаете. Когда вы передаете функцию где-то еще, чтоб она вызвалась обратно (callback), она может вызвать функцию с другим контекстом (‘this’). Если вы добавляете обработчик событий для кнопки, то кнопка будет этим самым ‘this’. Иногда это то, что вы хотите, но в коде выше это не так. Мы хотим чтобы this ссылался на объект App, а не кнопку.
Это давняя проблема в JavaScript. Она настолько распространена, что разработчики создали нечто известное как паттерн self, где вы сохраняете правильную ссылку this, используя временную переменную self. Это не круто, но это работает.
|
1
2
3
4
5
6
7
8
|
function App() {
this.clicked = false;
var button = document.getElementById(‘button’);
<b>var self = this;</b>
button.addEventListener(‘click’, function(evt) {
self.clicked = true;
});
}
|
Другой способ решения проблемы — метод bind, он заставляет this стать конкретным объектом, независимо от того, как функция будет названа позднее.
|
1
2
3
4
5
6
7
8
|
function App() {
this.clicked = false;
var button = document.getElementById(‘button’);
var callback = (function(evt) {
this.clicked = true
})<b>.bind(this);</b>
button.addEventListener(‘click’,callback);
}
|
Опять же, это будет работать, но это не очень хорошая практика. Теперь у нас есть дополнительный код, и при выполнении bind может возникнуть дополнительная нагрузка. Но с помощью стрелочных функций мы может получить лучший результат:
|
1
2
3
4
5
6
7
|
function App() {
this.clicked = false;
var button = document.getElementById(‘button’);
button.addEventListener(‘click’,()=>{
this.clicked = true;
});
}
|
Стрелочные функции автоматически захватывают переменную this из окружающего контекста, где эта функция определена, а не оттуда, где она используется . Это означает, что вы можете передать функцию в другое место и абсолютно точно будете знать, что использоваться будет правильный вариант this. В коде выше все работает отлично без каких-либо противных хаков.
Короче говоря, стрелочные функции действительно классные. Я стараюсь использовать их везде, где я могу. Они делают код коротким и легко читаемым, а this становится снова разумным.
Продолжение следует …
Источник: scotch.io
