Шаблонные строки

Не знаю как правильно перевести template strings на русский язык, но мне кажется термин шаблонные строки будет наиболее близок к сути. Новая фича ES2015, судя по комментам в интернете, вызвала противоположные отзывы. Кто-то в восторге и кричит “Наконец-то”, кто-то консервативно бубнит “и так было нормально. В чем бенефит?”. Ну а мы давайте разберемся в чем собственно суть?

Backtick (обратный штрих)

Вообще не помню, чтобы когда-либо использовал понятие “обратный штрих”. Были кавычки, были апострофы, одинарная кавычка (которая апостроф, опять же). Ну в общем и целом это и есть символ `, который лег в основу шаблонных строк в ES2015.

Раньше разработчиков можно было разделить на тех, кто обрамляет строки в апострофы (называя их одинарными кавычками), и кавычки (обычные двойные). Теперь, благодаря шаблонным строкам, две эти группы программистов могут быть объединены:

1
var str = `What's up man? This is "ES2015"!`;

Под шаблонными строками понимается строка, заключенная в обратные штрихи (backticks).

Выражения

Теперь внутрь шаблонных строк можно помещать и выражения. Для этого используется следующий синтаксис:

1
var str = `Today is ${Date.now()}`;

Все, что находится ${здесь}, является выражением, которое будет вычисляться на этапе исполнения кода.

Многострочность

Шаблонные строки дают возможность иметь в коде многострочные шаблоны. Раньше для решения задачи, когда в коде у вас была разметка, и при этом, чтобы код был читабельным, приходилось изобретать что-то вроде:

1
2
3
4
5
var template = [
    '<h1>' + 'Title' + '</h1>',
    '<div>' + 'Some content' + '</div>'
  ];
console.log(template.join('\n'));

Теперь все это стало проще:

1
2
3
4
var template2 = `
  <h1>Title</h1>
  <div>Some content</div>`;
console.log(template2);

А если вспомнить про Деструктуризацию, то и вовсе можно решать шаблонные задачи весьма элегантно:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var post = {
  title: 'ES6 Template Strings',
  date: Date.now(),
  tags: [
    'ES6', 'template strings'
    ]
};

var {title, tags} = post;
var template = `
<h1>${title}</h1>
<ul>
${tags.map(tag=>`<li>${tag}</li>`).join('\n')}
</ul>`;
console.log(template);

Как видно, внутри ${} действительно выражения, и более того, они могут внутри себя содержать другие шаблонные строки, которые в свою очередь могут содержать другие выражения.

String.raw

Как видно из названия, статический метод String.raw нужен для получения необработанных строк внутри шаблона. Например:

1
2
3
4
5
console.log(`one\ntwo`);
//one
//two
console.log(String.raw`one\ntwo`);
//one\ntwo

Важно понимать, что ${выражения} внутри шаблонных строк все равно будут вычислены:

1
2
console.log(String.raw`One + two\nis ${1+2}`);
//One + two\nis 3