在JavaScript中轉義HTML

Question

在JavaScript中構建HTML時，我總是在轉義雙引號。 例如

$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>"); 

而且，當引號很多時，我會不斷犯錯誤，以逃避引號。 而且我最終花費的時間超過了修復它們的時間。

是否有比我使用的方法更好（更快/更安全/更清晰）的HTML構建方法？

更新

我忘了提到一個相當重要的一點！ 我正在使用PHP輸出此JavaScript。 所以，我有這樣的代碼：

echo '$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>");';

這使得使用單引號成為問題（'cos他們最終破壞了PHP！當我忘記自己在某些PHP中並且使用單引號時，這是我一直遇到的另一個問題，如下面的評論中所述） 。

Answer 1

您也許可以在JavaScript中使用模板字符串 。 也使使用${var}語法將變量插入字符串也很簡單。

echo '$(wrapper).append(`<input type="text" name="thingummy[${id}]" data-id="${data_id}" id="${id}_${data_id}" /> <br>`);';

Answer 2

您可以使用heredoc語法，如下所示：

<?php
echo <<<JAVASCRIPT
<script type="text/javascript">
alert("some javascript code where you don't have to escape double quotes");
</script>
JAVASCRIPT;

這將簡化您的工作。

或者，您可以關閉php標記並再次將其打開，如下所示：

<?php
$somePhpCode = 1;
?>
<script type="text/javascript">
alert("some javascript code where you don't have to escape double quotes");
</script>
<?php
$somePhpCode = 2;
?>