Erreur de syntaxe "Littéral de modèle non terminé" lorsque le littéral contient une balise de script
J'utilise des littéraux de modèle ES6 pour construire du HTML dans des chaînes, et jusqu'à présent, cela a bien fonctionné. Cependant, dès que j'essaie de mettre le texte littéral </script> dans ma chaîne, le navigateur lance et renvoie l'erreur de syntaxe:
SyntaxError: Unterminated template literal
Voici un exemple JavaScript simple qui renvoie l'erreur:
var str=`
<script>
</script>
`
var pre = document.createElement('pre')
pre.textContent = str
document.body.appendChild(pre)
Voir le code ci-dessus dans JS Fiddle .
Il semble que ce qui se passe, c'est qu'il abandonne la recherche de la citation littérale de fin et commence à traiter tout au point comme du HTML littéral, donc tout le JavaScript après ce point est incorrectement traité comme du HTML, ce qui n'est pas le cas!
Si je remplace script par toute autre balise HTML légale (et même des balises non valides comme scripty), alors cela fonctionne juste très bien, donc je ne vois pas comment cela peut être une erreur de syntaxe ou un cas étrange où je pense avoir tapé un caractère (par exemple le backtick) mais à la place, j'en ai tapé un autre qui lui ressemble presque.
Je crée littéralement une chaîne (à ma connaissance, au moment de la compilation), le navigateur ne devrait pas essayer de la traiter comme HTML ou de toute façon analyser il. Alors qu'est-ce qui donne?
Si vous insérez </script> à l'intérieur d'une balise de script, que ce soit une chaîne entre guillemets, des apostrophes ou même un modèle littéral, il toujours fermera la balise de script. Il faut y échapper, par exemple comme ça:
var str=`
<script>
<\/script>
`
var pre = document.createElement('pre')
pre.textContent = str
document.body.appendChild(pre)
Cependant, si vous utilisez un script externe <script src="url"></script>, cela devrait bien fonctionner sans s'échapper.