ECMAScript 6 oferuje nowy typ literału łańcuchowego, wykorzystujący backstick jako separator. Te literały pozwalają na osadzenie podstawowych wyrażeń interpolacyjnych, które są następnie automatycznie analizowane i analizowane.
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);
Jak widać, użyliśmy `około szeregu znaków, które są interpretowane jako dosłowny ciąg znaków, ale wszelkie wyrażenia formy ${..}są analizowane i przetwarzane bezpośrednio w tekście.
Jedną naprawdę fajną zaletą interpolowanych literałów łańcuchowych jest to, że mogą one dzielić się na wiele linii:
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!
Wyrażenia interpolowane
Dowolne prawidłowe wyrażenie może pojawiać się wewnątrz ${..}interpolowanego literału łańcuchowego, w tym wywołania funkcji, wbudowane wywołania wyrażenia funkcyjnego, a nawet inne interpolowane łańcuchy literalne!
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!
Tutaj wewnętrzny `${who}s`interpolowany literał łańcuchowy był dla nas nieco przyjemniejszy, gdy łączyliśmy whozmienną z "s"łańcuchem, w przeciwieństwie do who + "s". Aby zachować notatkę, interpolowany łańcuch literalny jest po prostu leksykalny o zasięgu, w którym się pojawia, a nie dynamicznie w żaden sposób:
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!"
Używanie szablonu HTML w literaturze jest zdecydowanie bardziej czytelne dzięki zmniejszeniu irytacji.
Prosty stary sposób:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Z ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Twój ciąg może obejmować wiele linii.
- Nie musisz uciekać znaków cudzysłowu.
- Możesz uniknąć grupowania takich jak: „”> ”
- Nie musisz używać operatora plus.
Oznaczone literały szablonów
Możemy również otagować ciąg szablonu, gdy ciąg szablonu jest oznakowany, literały i podstawienia są przekazywane do funkcji, która zwraca wynikową wartość.
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
Możemy tutaj użyć operatora rozkładania, aby przekazać wiele wartości. Pierwszy argument - nazwaliśmy go łańcuchami - to tablica wszystkich prostych łańcuchów (między dowolnymi interpolowanymi wyrażeniami).
Następnie zebrać wszystkie kolejne argumenty do tablicy zwanych wartości używając ... gather/rest operator, choć może oczywiście nie zostawili je jako pojedyncze nazwanych parametrów następujących ciągów parametrów jak zrobiliśmy powyżej ( value1, value2etc.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Argumenty zebrane w naszej tablicy wartości są wynikami już ocenionych wyrażeń interpolacyjnych znalezionych w literale ciągu. Znakowany literał łańcucha jest jak etap przetwarzania po ocenie interpolacji, ale przed skompilowaniem końcowej wartości ciągu, co pozwala na większą kontrolę nad generowaniem łańcucha z literału. Spójrzmy na przykład tworzenia szablonów wielokrotnego użytku.
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);
Surowe struny
Nasze funkcje znaczników otrzymują pierwszy argument, który nazywamy ciągami, którym jest tablica. Ale zawiera dodatkowy bit danych: nieprzetworzone nieprzetworzone wersje wszystkich ciągów. Możesz uzyskać dostęp do tych nieprzetworzonych wartości ciągów za pomocą .rawwłaściwości:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Jak widać, nieprzetworzona wersja ciągu zachowuje \nsekwencję zmiany znaczenia, a przetworzona wersja ciągu traktuje go jak prawdziwą nową linię bez zmian. ECMAScript 6 pochodzi z wbudowanej funkcji, które mogą być używane jako znak ciągiem znaków: String.raw(..). Po prostu przechodzi przez surowe wersje ciągów:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"