如何將錨標記格式化為字符串？

Question

這行：

return '<a href="javascript:SomeFunction('+ var1 + ',' + var2 + ')"; > Stars </a>';

呈現此：

<a href="javascript:SomeFunction(Pure Magic,4)" ;=""> Stars </a>

看起來像是正確的錨標記，但是單擊它會出現此錯誤：

參數列表后未捕獲到的SyntaxError：缺少）

我肯定這個錯誤會引起誤解，因為有關的括號就在那里。

我想念什么？

提前致謝。

Answer 1

由於var1包含一個字符串值，因此需要在其周圍var1引號：

return '<a href="javascript:SomeFunction(\'' + var1 + '\',' + var2 + ');"> Stars </a>';

如果字符串可以包含需要轉義為字符串文字或需要URI編碼的字符，則需要更多代碼：

return '<a href="javascript:' + encodeURIComponent('SomeFunction(\'' + var1.replace("\\", "\\\\").replace("'", "\\'") + '\',' + var2 + ');') + '"> Stars </a>';

生成這樣的代碼很復雜，而且很容易出錯。 如果可能，應改為生成元素，以便可以直接設置屬性，而不必為其創建代碼。 使用jQuery的示例：

return $('<a>', { href: '#', text: ' Stars ' }).click(function(e){
  e.preventDefault();
  SomeFunction(var1, var2);
});

Answer 2

您在雙引號結尾有誤

return '<a href="javascript:SomeFunction('+ var1 + ',' + var2 + ');" > Stars </a>';

Answer 3

您沒有將第一個變量（似乎是一個字符串）用引號引起來。

return '<a href="javascript:SomeFunction(\''+ var1 + '\', ' + var2 + ');" > Stars </a>';

---

注意 ：如Paul S.的注釋所指出，分號應位於雙引號內，因為它是屬性值的一部分。

Answer 4

正如您只想添加帶有href的<a> ，讓瀏覽器使用String.prototype.link類的方法為您完成轉義和編碼工作。

' Stars '.link('javascript:SomeFunction(' + JSON.stringify(var1) + ', ' + JSON.stringify(var2) + ')');
// <a href="javascript:SomeFunction(&quot;Pure Magic&quot;, 4)"> Stars </a>

---

如果您經常遇到此類問題，請考慮是否更容易切換到使用DOM方法 ，即

var a = document.createElement('a');
a.addEventListener('click', SomeFunction.bind(a, var1, var2));

這使您不必編寫實體編碼等來保護自己在代碼將被解釋的每個級別（ JavaScript ， HTML ， JavaScript ），並且意味着與編寫HTML相比，您對DOM樹的訪問更加直接