ES6pojawia się nowy typ literału tekstowego, używając `znaku wstecznego jako separatora. Te literały umożliwiają osadzanie podstawowych wyrażeń interpolacji ciągów, które są następnie automatycznie analizowane i oceniane.
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);
Jak widać, użyliśmy ... '' wokół serii znaków, które są interpretowane jako ciąg znaków, ale wszystkie wyrażenia formularza ${..}są natychmiast analizowane i oceniane w tekście.
Jedną naprawdę dobrą zaletą interpolowanych literałów ciągów jest to, że można je dzielić 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 );
Wyrażenia interpolowane
Każde prawidłowe wyrażenie może pojawić się wewnątrz ${..}w interpolowanym ciągu lit‐ eral, w tym wywołania funkcji, wywołania wyrażeń funkcji wbudowanych, a nawet inne 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 );
Tutaj, wewnętrzny interpolowany literał łańcuchowy $ {who} s 'był dla nas trochę przyjemniejszy, kiedy łączyliśmy zmienną who z "s"łańcuchem, w przeciwieństwie do who + "s". Ponadto, aby zachować notatkę, interpolowany literał ciągu jest dokładnie lexically scopedtam, gdzie się pojawia, a nie dynamically scopedw ż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();
Korzystanie z template literalHTML 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 ES6:
`<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 zmieniać cudzysłowu.
- Możesz uniknąć grupowań, takich jak: '">'
- Nie musisz używać operatora plusa.
Oznaczone literały szablonów
Możemy również oznaczyć templateciąg znaków, gdy znak templatejest oznaczony, literalspodstawienia i są przekazywane do funkcji, która zwraca wynikową wartość.
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}`;
W tym miejscu możemy użyć spreadoperatora do przekazania wielu wartości. Pierwszy argument - nazwaliśmy go ciągami znaków - jest tablicą wszystkich zwykłych łańcuchów (elementów między wszelkimi interpolowanymi wyrażeniami).
następnie zbieramy wszystkie kolejne argumenty w tablicę zwaną wartościami przy użyciu znaku ... gather/rest operator, chociaż oczywiście można było pozostawić je jako indywidualne nazwane parametry po parametrze string, tak jak zrobiliśmy to powyżej (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
argument(s)Zebrane w naszej tablicy wartości są wyniki już ocenianych interpolacji wyrażeń występujących w dosłownym strun. A tagged string literaljest jak krok przetwarzania po oszacowaniu interpolacji, ale przed skompilowaniem końcowej wartości ciągu, co pozwala na większą kontrolę nad generowaniem ciągu z literału. Spójrzmy na przykład tworzenia pliku 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);
Surowe ciągi
nasze funkcje znaczników otrzymują pierwszy wywołany przez nas argument strings, którym jest plik array. Ale jest też dodatkowa porcja danych: surowe nieprzetworzone wersje wszystkich ciągów. Możesz uzyskać dostęp do tych nieprzetworzonych wartości ciągu za pomocą .rawwłaściwości, na przykład:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
Jak widać, rawwersja łańcucha zachowuje sekwencję \ n ze zmianą znaczenia, podczas gdy przetworzona wersja łańcucha traktuje ją jak prawdziwą nową linię bez zmiany znaczenia. ES6pochodzi z wbudowanej funkcji, które mogą być używane jako znak ciągiem znaków: String.raw(..). Po prostu przechodzi przez surowe wersje strings:
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );