Lỗi cú pháp "Không có mẫu chuẩn" khi chữ chứa thẻ tập lệnh

Question

Tôi đang sử dụng các mẫu văn bản ES6 để xây dựng một số HTML theo chuỗi và cho đến nay nó đã hoạt động tốt. Tuy nhiên, ngay sau khi tôi cố gắng để đưa các văn bản đen </script> trong chuỗi của tôi trình duyệt ném lên và ném các lỗi cú pháp:

SyntaxError: Unterminated template literal 

Đây là một mẫu JavaScript đơn giản mà ném lỗi:

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

Xem mã ở trên trong JS Fiddle. Có vẻ như những gì đang xảy ra là nó từ bỏ tìm kiếm trích dẫn cuối cùng và thay vào đó bắt đầu xử lý mọi thứ tại điểm dưới dạng HTML theo nghĩa đen, do đó, tất cả các mã JavaScript sau thời điểm đó được xử lý không chính xác dưới dạng HTML, không phải vậy!

Nếu tôi thay script bởi bất kỳ khác tag HTML pháp lý (và thậm chí thẻ không hợp lệ như scripty) sau đó nó hoạt động tốt, vì vậy tôi không thể nhìn thấy thế nào điều này có thể có thể là một lỗi cú pháp hoặc một trường hợp kỳ lạ nơi tôi nghĩ rằng tôi đã gõ một ký tự (ví dụ như backtick) nhưng thay vào đó đã gõ một cái khác trông giống như nó.

Tôi thực sự đang tạo chuỗi (theo hiểu của tôi, tại thời gian biên dịch), trình duyệt nên không phải đang cố coi nó là HTML hoặc theo bất kỳ cách nào phân tích cú pháp. Vì vậy, những gì cho?

Answer 1

Nếu bạn chèn </script> bên trong thẻ tập lệnh, cho dù đó là một chuỗi trong dấu ngoặc kép, dấu nháy đơn hay thậm chí là mẫu, nó sẽ luôn đóng đóng thẻ tập lệnh. Bạn phải thoát khỏi nó, ví dụ như thế:

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

Tuy nhiên, nếu bạn sử dụng tập lệnh bên ngoài <script src="url"></script>, nó sẽ hoạt động tốt mà không cần thoát.