Qual è l'utilizzo del simbolo dell'antifetto (`) in JavaScript?

Question

Un apice inverso sembra funzionare lo stesso come un unico simbolo citazione, così ho potuto usarlo per definire una stringa come questa:

var s = `abc`; 

C'è un modo in cui l'apice inverso in realtà si differenzia da una sola offerta?

Answer 1

Questa è una funzione di ECMAScript 6 denominata modello stringhe letterali.

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

• Esempi: http://tc39wiki.calculist.org/es6/template-strings/
• spec ufficiale: ES 2015 Language Specification, 12.2.9 Template Literal Lexical Components (un po 'asciutto)

letterali modello può essere utilizzato più di linea e possono utilizzare "interpolazione" per inserire il contenuto di variabili:

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

W Uscita malato:

--- 
    a is: 123 
--- 

supportati come di Firefox e Chrome 34 41

Answer 2

ES6 esce con un nuovo tipo di stringa letterale, utilizzando il back-tick come delimitatore. Questi valori letterali consentono l'incorporamento di espressioni di interpolazione di stringa di base, che vengono quindi analizzate e valutate automaticamente.

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

Come potete vedere, abbiamo usato il ` intorno ad una serie di personaggi, che vengono interpretati come una stringa letterale, ma eventuali espressioni della forma ${..} vengono analizzati e valutati in linea immediatamente.

Uno veramente bello beneficio di stringhe interpolati è loro consentito di dividere su più linee:

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! 

interpolata Espressioni

Qualsiasi espressione valida è permesso di apparire all'interno ${..} in una stringa di interpolato letterale, comprese le chiamate di funzione, le chiamate di espressioni di funzioni inline e persino altri valori letterali stringa interpolati!

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! 

Qui, la stringa interna `${who}s` interpolato letterale era convenienza un po 'meglio per noi quando si associa la variabile che con la stringa "s", al contrario di who + "s". Anche per mantenere una nota è una stringa interpolato letterale è solo con scope lessicale in cui appare, non è ambito in modo dinamico in alcun modo

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

Utilizzando il modello letterale per il codice HTML è sicuramente più leggibile, riducendo il fastidio.

Il modo più semplice antiche:

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

Con ES6:

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

• La stringa può estendersi su più righe.
• Non è necessario ignorare i caratteri di citazione.
• È possibile evitare i raggruppamenti come: '">'
• Non è necessario utilizzare l'operatore più

targhetta del modello letterali

Possiamo anche contrassegnare una stringa di modello,. quando una stringa di modello viene etichettato, i letterali e le sostituzioni vengono passati alla funzione che restituisce il valore risultante.

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 

Possiamo usare l'operatore di spread qui per passare più valori. Il primo argomento, lo abbiamo chiamato stringhe, è una matrice di tutte le stringhe semplici (il materiale tra qualsiasi espressione interpolata).

quindi raccogliamo tutti gli argomenti successivi in ​​una matrice denominata valori utilizzando lo ... gather/rest operator, sebbene potreste ovviamente averli lasciati come singoli parametri denominati seguendo il parametro stringhe come abbiamo fatto sopra (value1, value2 etc).

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

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

L'argomento (s) raccolti nella nostra matrice valori sono i risultati delle espressioni interpolazione già valutate trovati nella stringa di testo. Una stringa letterale con tag è come una fase di elaborazione dopo che le interpolazioni sono state valutate, ma prima che il valore della stringa finale sia compilato, consentendo un maggiore controllo sulla generazione della stringa dal letterale. Diamo un'occhiata a un esempio di creazione di modelli riutilizzabili.

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

prime stringhe

nostre funzioni tag ricevono un primo argomento abbiamo chiamato stringhe, che è un array. Ma c'è un ulteriore bit di dati incluso: le prime versioni non elaborate di tutte le stringhe. È possibile accedere a quei valori di stringa prime utilizzando la proprietà .raw, in questo modo:

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

Come si può vedere, la versione grezza della stringa conserva la \n sequenza di sfuggita, mentre la versione elaborata della stringa lo tratta come un nuova riga reale senza escape. ES6 è dotato di una funzione incorporata che può essere utilizzata come tag letterale stringa: String.raw(..). Si passa semplicemente attraverso le versioni prime delle stringhe:

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

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

Answer 3

backtick (`) vengono utilizzati per definire letterali template. I modelli letterali sono una nuova funzionalità di ES6 per semplificare il lavoro con le stringhe.

Caratteristiche:

• siamo in grado di interpolare qualsiasi tipo di espressione nei letterali modello.
• Possono essere multilinea.

Nota: possiamo facilmente usare virgolette singole (') e doppi apici (") all'interno dei apici inversi (`).

Esempio:

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

interpolare le variabili o l'espressione possiamo usare la notazione ${expression} per questo.

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

stringhe a più linee significa che non è più necessario utilizzare \n per le nuove linee più.

Esempio:

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

uscita:

Hello Rohit! 
How are you? 

Answer 4

backticks racchiudono modello letterali, p.k.a. Stringhe di modelli. I valori letterali del modello sono valori letterali stringa che consentono espressioni incorporate e funzioni di interpolazione delle stringhe.

I letterali di modello hanno espressioni racchiuse in segnaposti, contraddistinti dal simbolo del dollaro e parentesi graffe attorno a un'espressione, ad esempio ${expression}. Il segnaposto/espressioni vengono passati a una funzione. La funzione di default concatena solo la stringa.

Per sfuggire un backtick, mettere un backslash prima:

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

Utilizzare backticks di scrivere più facilmente stringa multi linea:

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

o

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

vs.vaniglia JS:

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

o

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

sequenze di escape:

• Unicode fugge indisturbato \u, per esempio \u00A9
• Unicode fughe codice punto indicato da \u{}, per esempio \u{2F804}
• esadecimale fugge avviato da \x, ad esempio \xA9
• Octal fughe letterali iniziate da \ e (a) cifra (s), per esempio \251