Wie wird das Backtick-Symbol (`) in JavaScript verwendet?

Question

A Graviszeichen scheint das gleiche wie ein Apostroph Symbol zu arbeiten, so konnte ich es verwenden, um eine Zeichenfolge wie folgt zu definieren:

var s = `abc`; 

Gibt es eine Möglichkeit, in der die Graviszeichen tatsächlich von einem einzigen Zitat unterscheiden?

Answer 1

Dies ist ein ECMAScript 6 Feature Vorlage Strings Literale genannt.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

• Beispiele: http://tc39wiki.calculist.org/es6/template-strings/
• Official spec: ES 2015 Language Specification, 12.2.9 Template Literal Lexical Components (etwas trocken)

Template Literale mehreren Leitungen verwendet werden kann, und mit "Interpolation" kann den Inhalt einzufügen, Variablen:

var a = 123, str = `--- 
    a is: ${a} 
---`; 
console.log(str); 

W ill output:

--- 
    a is: 123 
--- 

Unterstützt als von den folgenden 34 und 41 Chrome

Answer 2

ES6 kommt mit einer neuen Art von Stringliteral, mit der Back-Zecke als Trennzeichen auf. Diese Literale ermöglichen die Einbettung grundlegender Stringinterpolationsausdrücke, die dann automatisch analysiert und ausgewertet werden.

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); 

Wie Sie sehen können, haben wir die ` um eine Reihe von Zeichen, die wörtliche als String interpretiert werden, aber alle Ausdrücke der Form ${..} werden analysiert und inline sofort ausgewertet.

Ein wirklich netter Vorteil von interpoliert Stringliterale ist sie dürfen über mehrere Zeilen aufgeteilt:

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! 

Interpolated Expressions

Jeder gültige Ausdruck innerhalb ${..} in einer interpolierten Zeichenfolge erscheinen darf Literal, einschließlich Funktionsaufrufen, Inline-Funktionsausdruckaufrufen und sogar anderen interpolierten String-Literalen!

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! 

Hier werden der inneren `${who}s` interpoliert Stringliteral war ein wenig schöne Bequemlichkeit für uns, wenn die, die Variable mit dem "s" String kombiniert, wie zum who + "s" gegenüber. Auch eine Notiz zu halten, ist eine interpolierte Stringliteral ist nur lexikalisch, wo es scheint, nicht dynamisch in irgendeiner Weise scoped

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!" 

die Vorlage wörtliche für die HTML-Verwendung ist auf jeden Fall besser lesbar durch den Ärger zu reduzieren.

Die gute alte Art und Weise:

'<div class="' + className + '">' + 
    '<p>' + content + '</p>' + 
    '<a href="' + link + '">Let\'s go</a>' 
'</div>'; 

Mit ES6:

`<div class="${className}"> 
    <p>${content}</p> 
    <a href="${link}">Let's go</a> 
</div>` 

• Ihr String kann mehrere Zeilen erstrecken.
• Sie müssen die Anführungszeichen nicht umgehen.
• Sie können wie Gruppierungen vermeiden: '">'
• Sie müssen
nicht den Plus-Operator verwenden

Tagged Vorlage Literale

Wir auch eine Vorlage Zeichenfolge markieren können. wenn eine Vorlage Zeichenfolge markiert ist, werden die Literale und Substitutionen Funktion übergeben, die den sich ergebenden Wert zurückgibt.

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 

Wir können den Spread-Operator hier verwenden, um mehrere Werte zu übergeben. Das erste Argument - wir haben es Strings genannt - ist ein Array aller einfachen Strings (das Zeug zwischen allen interpolierten Ausdrücken).

wir dann alle nachfolgenden Argumente in einen Array mit Namen Werte sammeln die ... gather/rest operator verwenden, obwohl man natürlich habe sie als einzelne benannte Parameter links Parameter im Anschluss an den Saiten, wie wir oben (value1, value2 etc) taten.

function myTaggedLiteral(strings,...values) { 
    console.log(strings); 
    console.log(values);  
} 

let someText = 'Neat'; 
myTaggedLiteral`test ${someText} ${2 + 3}`; 
//["test", ""] 
// "Neat" 
// 5 

Das Argument (n) gesammelt in unsere Werten-Array sind die Ergebnisse der bereits ausgewerteten Interpolation Ausdrücke im Stringliteral gefunden. Ein getaggtes Zeichenfolgeliteral ist wie ein Verarbeitungsschritt, nachdem die Interpolationen ausgewertet wurden, aber bevor der endgültige Zeichenfolgenwert kompiliert wird, was Ihnen mehr Kontrolle über das Generieren der Zeichenfolge aus dem Literal ermöglicht. Sehen wir uns ein Beispiel für die Erstellung wiederverwendbarer Vorlagen an.

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 Strings

unserer Tag-Funktionen erhalten ein erstes Argument, das wir Strings genannt, die ein Array ist. Aber es gibt noch ein zusätzliches Stück Daten: die rohen unverarbeiteten Versionen aller Strings. Sie können diese rohen String-Werte Zugriff auf die .raw Eigenschaft verwendet wird, wie folgt aus:

function showraw(strings, ...values) { 
console.log(strings); 
console.log(strings.raw); 
} 
showraw`Hello\nWorld`; 

Wie Sie die Rohfassung des Strings bewahrt die entkam \n Sequenz sehen, während die bearbeitete Version der Zeichenfolge es wie eine behandelt Unbesetzte echte New-Line. ES6 verfügt über eine integrierte Funktion, die als String-Literal-Tag verwendet werden kann: String.raw(..). Es geht einfach durch die Rohversionen der Saiten:

console.log(`Hello\nWorld`); 
/* "Hello 
World" */ 

console.log(String.raw`Hello\nWorld`); 
// "Hello\nWorld" 

Answer 3

Backticks (`) werden verwendet, um Vorlage Literale zu definieren. Vorlagenliterale sind eine neue Funktion in ES6, um das Arbeiten mit Zeichenfolgen zu vereinfachen.

Features:

• wir jede Art von Ausdruck in der Template-Literale interpolieren.
• Sie können mehrzeilig sein.

Hinweis: können wir leicht Apostrophe (') und doppelte Anführungszeichen (") im Inneren der Backticks (`) verwenden.

Beispiel:

var nameStr = `I'm "Rohit" Jindal`; 

Um die Variablen interpolieren oder Ausdruck können wir die ${expression} Schreibweise dafür.

var name = 'Rohit Jindal'; 
var text = `My name is ${name}`; 
console.log(text); // My name is Rohit Jindal 

Multi-line-Strings bedeutet, dass Sie nicht mehr \n für neue Linien mehr verwenden.

Beispiel:

const name = 'Rohit'; 
console.log(`Hello ${name}! 
How are you?`); 

Ausgang:

Hello Rohit! 
How are you? 

Answer 4

Backticks einschließen Vorlage Literale, p.k.a. Vorlagenzeichenfolgen Vorlagenliterale sind Zeichenfolgenliterale, die eingebettete Ausdrücke und Zeichenfolgeninterpolationsfunktionen ermöglichen.

Template Literale haben Ausdrücke in Platzhalter eingebettet, das Dollarzeichen und geschweiften Klammern um einen Ausdruck bezeichnet, das heißt ${expression}. Der Platzhalter/die Ausdrücke werden an eine Funktion übergeben. Die Standardfunktion verkettet nur die Zeichenfolge.

eine Graviszeichen zu entkommen, bevor es einen umgekehrten Schrägstrich setzen:

`\`` === '`'; => true 

Verwenden Backticks leichter mehrzeiligen String schreiben:

console.log(`string text line 1 
string text line 2`); 

oder

console.log(`Fifteen is ${a + b} and 
not ${2 * a + b}.`); 

vs.Vanille JS:

console.log('string text line 1\n' + 
'string text line 2'); 

oder

console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); 

Escape-Sequenzen:

• Unicode entkommt durch \u, zum Beispiel \u00A9
• Unicode-Codepunkt entkommt angezeigt durch \u{}, zum Beispiel begann \u{2F804}
• Hexadezimal entweicht durch \x, zum Beispiel \xA9
• Octal wörtliche Fluchten Gestartet von \ und (a) Ziffer (n), zum Beispiel \251