76 lines
3.2 KiB
Markdown
76 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
title: Template Literals
|
|||
|
|
localeTitle: Литералы шаблонов
|
|||
|
|
---
## Литералы шаблонов
|
|||
|
|
|
|||
|
|
## Введение:
|
|||
|
|
|
|||
|
|
Когда мы хотим использовать переменную для создания строки, она становится очень болезненной, поскольку мы должны использовать знак + для конкатенации и отслеживания кавычек.
|
|||
|
|
|
|||
|
|
Теперь с ES6 мы можем сделать строку с использованием обратных ссылок и с помощью заполнителей, которые обозначены знаком доллара и фигурными фигурными скобками, например $ {expression}.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const name='John';
|
|||
|
|
const city='London';
|
|||
|
|
|
|||
|
|
Older Style:
|
|||
|
|
const sentence ='My name is '+ name +'. I live in '+city.
|
|||
|
|
ES6 way:
|
|||
|
|
const sentence = `My name is ${name}. I live in ${city}`;
|
|||
|
|
Here ${name} and ${city}are going to be interpolated by the variable name and city respectively.
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Строки MultiLine:
|
|||
|
|
|
|||
|
|
Пожилой стиль:
|
|||
|
|
|
|||
|
|
Когда мы хотели разбить нашу строку на несколько строк, нам пришлось использовать обратную косую черту.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const multipleLineString= "We have \
|
|||
|
|
multiple lines \
|
|||
|
|
here";
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Теперь, когда мы хотим создать mutiline строку, мы можем использовать строки шаблонов. Мы можем окружить нашу строку обратными окнами. Этот подход чрезвычайно полезен, когда мы хотим создать динамическую разметку html.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const htmlMarkup = `
|
|||
|
|
<html>
|
|||
|
|
<head></head>
|
|||
|
|
<title>Template string</title>
|
|||
|
|
<body>Hello World</body>
|
|||
|
|
</html>`;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Вложение шаблонных строк:
|
|||
|
|
|
|||
|
|
Мы можем вложить их друг в друга.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const cities =[
|
|||
|
|
{name:'Delhi', year: 2010},
|
|||
|
|
{name:'Mumbai', year: 2015},
|
|||
|
|
{name:'Kolkata', year: 2017}];
|
|||
|
|
|
|||
|
|
|
|||
|
|
const markup = `
|
|||
|
|
<ul>
|
|||
|
|
${cities.map(city=>`<li>I lived in ${city.name} in the year ${city.year}</li>`).join('')}
|
|||
|
|
</ul>`;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Здесь оператор объединения после функции карты удаляет дополнительные запятые, которые добавляются после каждого li.
|
|||
|
|
|
|||
|
|
## Если утверждения и функции
|
|||
|
|
|
|||
|
|
Мы также можем использовать операторы If внутри строк шаблона.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const data = {name: 'John', city: 'London', birthyear: 1900};
|
|||
|
|
const markup = `<div>${data.name} lives in ${data.city}. ${data.birthyear ? `<div>He was born in the year ${data.birthyear}</div>`:''}</div>`;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
В приведенном выше примере, если определен рождаемость, тогда создается div с содержимым «Он родился в году», иначе не было бы никакого div.
|
|||
|
|
|
|||
|
|
Мы также можем вызывать функции внутри строк шаблона.
|