В этом уроке мы разберем что такое шаблоны строк в 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 и насколько это проще.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.