Errore di sintassi "Errore letterario inferiore letterale modello" quando letterale contiene tag script

Question

Sto utilizzando i letterali dei modelli ES6 per creare un codice HTML nelle stringhe e fino ad ora ha funzionato correttamente. Tuttavia, non appena provo a mettere il testo letterale </script> nella mia stringa del browser getta e lancia l'errore di sintassi:

SyntaxError: Unterminated template literal 

Ecco un esempio semplice JavaScript che genera l'errore:

var str=` 
<script> 
</script> 
` 
var pre = document.createElement('pre') 
pre.textContent = str 
document.body.appendChild(pre) 

Vedere il codice sopra riportato in JS Fiddle.

Sembra che quello che sta succedendo è che rinuncia a cercare la citazione letterale di fine e invece inizia a trattare tutto al punto come HTML letterale, quindi tutto il codice JavaScript dopo quel punto viene erroneamente trattato come HTML, che non lo è!

Se sostituisco script da qualsiasi altro tag HTML legale (e anche i tag non validi come scripty) allora funziona bene, quindi non posso vedere come questo può eventualmente essere un errore di sintassi o di un caso strano in cui ho penso di aver digitato un carattere (ad esempio l'apice), ma invece ne ho scritto un altro che sembra quasi come esso.

Sto letteralmente creando una stringa (a mio avviso, in fase di compilazione), il browser dovrebbe non tentare di trattarlo come HTML o in qualsiasi modo analizzarlo. Quindi cosa dà?

Answer 1

Se si inserisce </script> all'interno di un tag script, non importa se si tratta di una stringa tra virgolette, apostrofi, o anche un modello letterale, sarà sempre chiudere il tag script. Dovete fuggire, ad esempio così:

var str=` 
<script> 
<\/script> 
` 
var pre = document.createElement('pre') 
pre.textContent = str 
document.body.appendChild(pre) 

Tuttavia, se si utilizzano script esterno <script src="url"></script>, dovrebbe funzionare bene anche senza fuggire.