ECMAScript 6 предлагает новый тип строкового литерала, использующий обратную черту в качестве разделителя. Эти литералы позволяют встроить базовые выражения интерполяции строк, которые затем автоматически анализируются и оцениваются.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
Как вы можете видеть, мы использовали `вокруг серии символов, которые интерпретируются как строковые литералы, но любые выражения формы ${..}анализируются и оцениваются внутри строки немедленно.
Одним из действительно приятных преимуществ интерполированных строковых литералов является то, что им разрешено разбивать несколько строк:
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!
Интерполированные выражения
Любое допустимое выражение может появляться внутри ${..}интерполированного строкового литерала, включая вызовы функций, вызовы встроенных выражений функций и даже другие интерполированные строковые литералы!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
Здесь, внутренний `${who}s`интерполированный строковый литерал был немного более удобным для нас при объединении whoпеременной со "s"строкой, в отличие от who + "s". Также, чтобы сохранить примечание, интерполированный строковый литерал просто лексически ограничен, где он появляется, а не динамически ограничен каким-либо образом:
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
Использование литерала шаблона для HTML определенно более читабельно за счет уменьшения раздражения.
Простой старый способ:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
С ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Ваша строка может занимать несколько строк.
- Вам не нужно избегать кавычек.
- Вы можете избежать группировок, таких как: ""> '
- Вам не нужно использовать оператор плюс.
Помеченные литералами шаблонов
Мы также можем пометить строку шаблона, если строка шаблона помечена, литералы и подстановки передаются в функцию, которая возвращает полученное значение.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Здесь мы можем использовать оператор распространения для передачи нескольких значений. Первый аргумент - мы назвали его строками - это массив всех простых строк (вещи между любыми интерполированными выражениями).
Затем мы собираем все последующие аргументы в массив, называемый значениями, используя ... gather/rest operator, хотя вы, конечно, можете оставить их как отдельные именованные параметры после параметра строк, как мы делали выше ( value1, value2и т. Д.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Аргумент (ы), собранные в нашем массиве значений, являются результатами уже вычисленных выражений интерполяции, найденных в строковом литерале. Строковый литерал с тегами подобен шагу обработки после оценки интерполяций, но до компиляции окончательного значения строки, что дает вам больший контроль над генерацией строки из литерала. Давайте посмотрим на пример создания повторно используемых шаблонов.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Сырые строки
Наши функции тегов получают первый аргумент, который мы назвали strings, который является массивом. Но есть дополнительный бит данных: необработанные необработанные версии всех строк. Вы можете получить доступ к этим необработанным строковым значениям, используя это .rawсвойство, например:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Как видите, необработанная версия строки сохраняет экранированную \nпоследовательность, в то время как обработанная версия строки обрабатывает ее как настоящую новую строку без выхода. ECMAScript 6 поставляется с встроенной функцией , которая может быть использована в качестве строкового литерала тега: String.raw(..). Он просто проходит через необработанные версии строк:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"