ECMAScript 6 пропонує новий тип літерального рядка, використовуючи backtick в якості роздільника. Ці літерали дозволяють вбудовувати базові вирази інтерполяції рядків, які потім автоматично аналізуються та оцінюються.
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);
Сирі струни
Наші функції тегів отримують перший аргумент, який ми називаємо рядками - це масив. Але є додатковий біт даних: необроблені необроблені версії всіх рядків. Ви можете отримати доступ до цих необроблених значень рядка, використовуючи .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"