it-swarm.dev

Errore di sintassi "Modello non terminato" quando il valore letterale contiene tag di script

Sto usando letterali template ES6 per costruire un po 'di HTML nelle stringhe, e finora ha funzionato bene. Tuttavia, non appena provo a inserire il testo letterale </script> nella mia stringa il browser si solleva e genera l'errore di sintassi:

SyntaxError: Unterminated template literal

Ecco un semplice esempio JavaScript che genera l'errore:

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

Vedi il codice sopra in JS Fiddle .

Sembra che ciò che sta accadendo sia che smette di cercare la citazione letterale di fine e invece inizia a trattare tutto in quel punto come HTML letterale, quindi tutto il JavaScript dopo quel punto viene erroneamente trattato come HTML, che non lo è!

Se sostituisco script con qualsiasi altro tag HTML legale (e anche tag non validi come scripty), allora funziona solo bene, quindi non riesco a vedere come questo possa essere un errore di sintassi o uno strano caso in cui penso di aver digitato un carattere (ad esempio il backtick) ma invece ne ho digitato un altro che sembra quasi simile.

Sto letteralmente creando una stringa (per quanto ne so, al momento della compilazione), il browser non dovrebbe non tentare di trattarlo come HTML o in alcun modo analizzarlo esso. Quindi cosa dà?

23
Michael

Se inserisci </script> all'interno di un tag di script, indipendentemente dal fatto che sia una stringa tra virgolette, apostrofi o anche un modello letterale, sempre chiuderà il tag di script. Devi scappare, ad esempio così:

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

Tuttavia, se si utilizza lo script esterno <script src="url"></script>, dovrebbe funzionare bene senza scappare.

35