Question

如何在javascript中正确使用产品ID注入。

  $(".vote_count").wrap("<a id='id' href='countvotes/{product_id}'</a>");

Answer 1

对于 ES5 ，就像这样

$(".vote_count").wrap('<a id="id" href="countvotes/' + encodeURIComponent(product_id) + '"></a>');

对于 ES6 ，您可以使用string templates

$(".vote_count").wrap(`<a id="id" href="countvotes/${encodeURIComponent(product_id)}"></a>`);

Answer 2

如果您的问题是：＆＃34;我有一个product_id变量，并希望将其放在此代码中{product_id}的位置，＆＃34;有三个答案：（如果您正在谈论id，答案基本相同，只需进行适当的更改。）

字符串连接：

$(".vote_count").wrap("<a id='id' href='countvotes/" + product_id + "'></a>");

ES2015（又名ES6）模板字符串：

$(".vote_count").wrap(`<a id='id' href='countvotes/${product_id}'></a>`);

几种模板引擎中的任何一种。

通常，最好将这些内容与encodeURIComponent结合使用，因为您正在输出URI，因此如果product_id中包含具有特殊含义的内容（如/）在URI中，您需要转义它们。所以：

$(".vote_count").wrap("<a id='id' href='countvotes/" + encodeURIComponent(product_id) + "'></a>");

或

$(".vote_count").wrap(`<a id='id' href='countvotes/${encodeURIComponent(product_id)}'></a>`);

更进一步：由于您正在输出HTML属性的内容，因此还必须确保您输出的内容是有效的HTML文本。没有内置功能，但写一个简单的功能：

var escapes = {
    '&': '&amp;',
    '<': '&lt;',
    '"': '&quot;'
};
function escapeHTML(str) {
    return str.replace(/[&<"]/g, function(ch) {
        return escapes[ch];
    };
}

（没有必要逃避>，但如果你愿意，可以。{

使用它，我总是用双引号括起我的属性（因为那些是我逃脱的）。

所以：

$(".vote_count").wrap('<a id="id" href="countvotes/' + escapeHTML(encodeURIComponent(product_id)) + '"></a>");

和

$(".vote_count").wrap(`<a id="id" href="countvotes/${escapeHTML(encodeURIComponent(product_id))}"></a>`);

附注：您错过了>代码上的结束<a。这已经在上面修正了。

如何在javascript中使用正确的变量注入

2 个答案: