#7 ES6 - строки

poster
В этом уроке мы с вами разберем, как использовать шаблоны строк в ecmascript 6 и какие это дает нам преимущества
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом уроке мы разберем что такое шаблоны строк в es6.

В ес5 нам приходилось выполнять конкатенацию строк и обычно мы использовали для этого знак плюс

var name = 'Alex';
var hello = 'Hello ' + name;
console.log(hello);

В ес6 можно писать переменные внутри строки и это позволяет делать намного лаконичнее чем раньше Для этого используется специальная кавычка, которую обычно вы не используете. Она находится там же, где и символ тильда. Мы пишем строку в этих кавычках и используем $ и фигурные скобки, чтобы передать туда переменную

const name = 'Alex';
const hello = `Hello ${name}`;

Это намного чище и понятнее чем раньше.

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

var name = 'Alex';
var html = '<div>' +
  '<h1>' + name + '<h1>' +
  '</div>';
console.log(html)

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

const name = 'Alex';
const html = `
  <div>
    <h1>${name}</h1>
  </div>
`;
console.log(html)

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

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

Внутри кавычек не обязательно должна идти переменная. Там может быть любое выражение. Например

const message = `This equals to ${100/4}`;
console.log(message);

В консоли мы получим 25.

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

Впереди ес6 строки можно написать функцию без вызова. Тогда внутри в этой функции мы можем получить доступ к массиву строк и переменным.

const tag = (strings, ...values) => {
    console.log(strings, values);
}

const message = tag`It's ${new Date().getHours()} and I'm ${'sleepy'}`
console.log(message);

Теперь внутри мы можем изменить любую переменную. Например, поменяем вторую переменную на awake если значение времени меньше 20. И нам необходимо вернуть новую строку.

const tag = (strings, ...values) => {
    console.log(strings, values);
    if (values[0] < 20) {
      values[1] = 'awake';
    }
    return `${strings[0]}${values[0]}${strings[1]}${values[1]}`
}

const message = tag`It's ${new Date().getHours()} and I'm ${'sleepy'}`
console.log(message);

Такие вещи встречаются не так часто, но знать как они выглядят надо

Итак в этом уроке мы с вами разобрали как использовать шаблоны в ес6 и насколько это проще.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Андрей Соболь
1год назад назад
В первом примере про изменения: <code><pre> const tag = (strings, ...values) => { console.log(strings, values); } const message = tag`It's ${new Date().getHours()} and I'm ${'sleepy'}` console.log(message); </pre></code> браузер выдает во втором сообщении undefind. Возможно, нужно отдельно сначала вызвать tag со строкой, а потом присвоит переменно message только строку.
Rustam Apaev
1год назад назад
Очень рад, что наконец добрался до ES6 и узнал столько нового. Я раньше так намучился с этими строками! Я заржал на моменте где говорится: "Это кавычки, которые в обычной жизни вы не будете использовать" ))) ПОлучается, мы теперь в необычной жизни)))
monsterlessons
1год назад назад
Надеюсь вся серия вам понравится) Все программирование - это необычная жизнь)