Введение в строковые шаблоны в JavaScript ES6
В этой статье вы узнаете о шаблонных строках в JavaScript, которые упрощают работу со строками.
До ES6 мы использовали только одинарные кавычки (') или двойные кавычки (“”) для создания строкового литерала. И это приводило к различного рода ограничениям и неудобствам при работе со строками.
Поэтому для облегчения жизни программистов, в ES6 были введены шаблонные строки. Они обеспечивают синтаксис, который позволяет работать со строкой более удобным и логичным способом.
В ES6 шаблонная строка создается путем, обертывания текста в обратные апострофы, как показано ниже.
let simple_string = `Это шаблонный литерал`;
Что нам это дает:
1) многострочная строка: строка, которая может распространяться на несколько
строк, без использования конкатенации;
2) форматирование строк: возможность подставить в шаблонную строку значения
переменных или выражений. Эта функция называется интерполяцией строк.
3) HTML экранирование: свободное написание HTML кода.
Синтаксис литерала шаблонной строки JavaScript
Как я сказал, вместо использования одиночных или двойных кавычек в шаблонных строках используются обратные апострофы, как показано в примере ниже.
let str = `Шаблонный литерал в ES6`;
console.log(str); // Литерал шаблонной строки в ES6
console.log(str.length); // 23
console.log(typeof str); // string
И теперь можно свободно использовать одиночные или двойные кавычки в литерале шаблона без экранирования.
let anotherStr = `Вот шаблонный литерал’ с одиночной кавычкой`;
Если строка содержит апостроф, вы должны экранировать ее с помощью обратного слэша (\) следующим образом:
let strWithBacktick = `Литералы шаблонов используют апострофы\` вместо кавычек`;
Многострочные строки
До ES6 мы использовали следующий метод для создания многострочной строки вручную, включая символ новой строки (\n):
let msg = 'Многострочная \n \
строка ';
console.log (MSG);
// Многострочная
// строка
Обратите внимание, что обратная косая черта (\), помещенная после символа новой строки (\n), указывает на продолжение строки, а не на новую строку.
Однако этот метод работает не во всех движках JavaScript. Поэтому мы часто создаем многострочную строку следующим образом:
var msg = ['Этот текст',
'Можно',
‘располагать на множестве линий’].join('\n');
Литералы шаблонных строк упрощают создание многострочных строк, поскольку вы просто включаете новую строку везде, где хотите, как показано в следующем примере:
var p =
`Этот текст
Можно
располагать на множестве строк`;
Обратите внимание, что пробел является частью строки, поэтому вы отвечаете за то, как текст будет выравниваться. Рассмотрим следующий пример.
Предположим, у вас есть объект post:
var post = {
title: “Шаблонные строки в JavaScript”,
intro: “Введение в шаблоны строк в JavaScript ES6”,
body: “Содержание сообщения будет здесь ...”,
tags: ['es6', 'шаблонные строки', 'JavaScript']
};
Следующий код возвращает HTML-код объекта post. Обратите внимание, что мы используем метод деструктуризации объекта, про который я уже рассказывал в этой статье, для извлечения свойств объекта post в отдельные переменные: заголовок, выдержку, тело и теги.
var {title, intro, body, tags} = post;
var postHtml = `<article>
<header>
<h1>${title}</h1>
</header>
<section>
<div>${intro}</div>
<div>${body}</div>
</section>
<footer>
<ul>
${tags.map(tag => `<li>${tag}</li>`).join('n ')}
</ul>
</footer>
</article>`;
В следующей статье мы продолжим обсуждение шаблонных строк в JavaScript.
-
Создано 22.05.2018 08:26:11
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.