Автор Уэйн Данкли (Front-end разработчик)
Одно из моих любимых дополнений к ES6 - шаблонные литералы или шаблонные строки, как их раньше называли. Все мы знаем, насколько болезненно создавать String, состоящий из текста, переменных и выражений. Повсюду используются одинарные кавычки, двойные кавычки и знаки плюса. См. Следующий пример кода, чтобы напомнить об ужасе.
let string = "Welcome " + name + ", your balance is " + ( oldValue + newValue );
Шаблонные литералы - это ответ ES6 на эту устаревшую головную боль. Они определяются с помощью обратных тиков ` и позволяют нам создавать строки со встроенными выражениями и переменными, как в библиотеках шаблонов, таких как Jade или Handlebars .
Заполнители используются для включения переменных в литерал шаблона, они идентифицируются с помощью знака доллара и фигурных скобок $ {}. Они оцениваются и объединяются в одну строку перед встраиванием. Приведенный выше пример с использованием шаблонных литералов выглядит так.
let string = `Welcome ${name}, your balance is ${oldValue + newValue}`
Заполнители также могут содержать выражения, которые будут оцениваться перед преобразованием в строку и внедрением.
let a = 5
let b = 4
let total = `Your total balance is ${ a + b }`
console.log(total);
---
Your total balance is 9
Многострочные струны
Литералы шаблона могут не только работать с несколькими строками, но также вставлять любые распознанные новые строки в выводимую строку.
let multi_line = `This is a multi-line comment, spread over 3 lines` console.log(multi_line); --- This is a multi-line comment, spread over 3 lines
При совместном использовании вы можете ясно увидеть разницу в простоте использования и удобочитаемости, которую предлагают литералы шаблонов. В приведенном ниже примере показано сравнение старого метода построения строк и нового метода с использованием шаблонных литералов.
var username = 'Dave'
var current = 35
var won = 100
var bonus = 2
var template = `Hello ${ username },
your new balance is ${ current + won * bonus } points.`
var string = "Hello " + username + ",\n your new balance is " + ( current + won * bonus ) + " points."
console.log(template);
console.log(string);
---
Hello Dave,
your new balance is 235 points.
Шаблонные литералы не только упрощают написание строк с переменными и встроенными выражениями, но и благодаря их повышенной удобочитаемости, несомненно, облегчают выявление ошибок до того, как они будут выведены на экран.
