ES6пропонує новий тип рядкового літералу, використовуючи `зворотну позначку як роздільник. Ці літерали дозволяють вбудовувати основні рядкові інтерполяційні вирази, які потім автоматично аналізуються та обчислюються.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
Як бачите, ми використовували символ `` '' навколо ряду символів, які інтерпретуються як рядковий літерал, але будь-які вирази форми ${..} аналізуються і обробляються негайно.
Однією приємною перевагою інтерпольованих рядкових літералів є те, що їм дозволено розділяти кілька рядків:
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 );
Інтерпольовані вирази
Будь-який допустимий вираз може відображатися всередині ${..}інтерпольованого рядка lit‐ eral, включаючи виклики функцій, виклики вбудованих виразів функції та навіть інші interpo‐ lated string literals!
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 );
Тут внутрішній інтерпольований літерал рядка $ {who} s` був трохи приємнішою зручністю для нас при поєднанні змінної who зі "s"рядком, на відміну від who + "s". Також зберігати примітку - це інтерпольований літеральний рядок саме lexically scopedтам, де він з’являється, dynamically scopedніяк
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
Використання template literalHTML для HTML, безумовно, є більш читабельним завдяки зменшенню роздратування.
Простий старий спосіб:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
З ES6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Ваш рядок може охоплювати кілька рядків.
- Вам не потрібно уникати лапок.
- Ви можете уникнути групувань, таких як: ""> '
- Вам не потрібно використовувати оператор плюс.
Позначені шаблонами літерали
Ми також можемо позначити templateрядок, коли templateрядок позначений тегом, literalsі заміни передаються функції, яка повертає отримане значення.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
Ми можемо використовувати spread тут оператор для передачі кількох значень. Перший аргумент - ми називали його рядками - це масив усіх простих рядків (речі між будь-якими інтерпольованими виразами).
потім ми збираємо всі наступні аргументи в масив, що називається значеннями, використовуючи ... gather/rest operator, хоча, звичайно, ви могли б залишити їх як окремі іменовані параметри, слідуючи параметру рядків, як це було зроблено вище (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
argument(s)Зібрані в нашій цінності масиву результати вже оцінених інтерполяційних виразів , знайдених в строковий літерал. A tagged string literalсхожий на крок обробки після оцінки інтерполяцій, але перед компіляцією остаточного значення рядка, що дозволяє вам більше контролювати генерування рядка з літералу. Давайте розглянемо приклад створення re-usable templates.
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, а це - array. Але є додатковий біт даних: необроблені необроблені версії всіх рядків. Ви можете отримати доступ до цих необроблених рядкових значень за допомогою .rawвластивості, наприклад:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
Як ви можете бачити, rawверсія рядка зберігає екрановану \ n послідовність, тоді як оброблена версія рядка розглядає її як справжній новий рядок, що не виходить за межі. ES6поставляється з вбудованою функцією , яка може бути використана в якості строкового литерала тега: String.raw(..). Він просто проходить через необроблені версії strings:
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );