Javascript构建动态字符串

Javascript build dynamic string

本文关键字：字符串 动态 构建 Javascript      更新时间：2023-09-26

我需要为每个数据构建一个动态字符串。这个字符串将设置一个HTML按钮，当事件点击时将调用一个函数。我对"e"有问题。请看下面的例子:

var stringButton = ""; 
var txtBtn = "My Button";
for(item in data){
     stringButton= "<input id='btn-" + item.id + "' type='button' href='#'
class='fbbutton'" + "value=' " + txtBtn + "' onclick='actionBtn(" + item .id + ", '" + 
item .name + "')'>";
}
function actionBtn(id, name) {
//process data.
}

在inspect元素中我看到:

<input id="btn-1599" type="button" href="#" class="fbbutton" value=" My Button " 
onclick="actionBtn(1599, " itemName"" jjjj')'="">

问题是创建一个字符串，它调用传递参数字符串的方法。正如我们所看到的，"answers"是错误的。正确的方法是什么?

IMO的正确方法是使用DOM创建方法并正确绑定事件处理程序，而不是使用内联事件处理程序。

var button = document.createElement('input');
button.id = item.id;
button.type = "button";
button.className = "fbbutton";
button.value = txtBtn;
button.onclick = (function(item) {
    return function() {
        actionBtn(item.id, item.name);
    };
}(item));

DOM检查器显示解析器处理后的DOM。它不会向您显示原始来源。诸如"使用了什么样的引号"、"属性的顺序"、"属性之间有多少空格字符"之类的内容不被保留。

在这里，您可以看到所有属性都用双引号括起来，但它们也包含双引号。但是你也会注意到，值内的值是作为字符串的一部分进行颜色编码的(通常为蓝色)。

也就是说，在源代码中，您在属性值周围使用单引号，并在其内部使用单引号。考虑使用双引号来代替一个或另一个(这里转义为'")，或&quot;实体。

最后，欢迎来到Stack Overflow。

请先回答之前的问题。

在你的item.name中肯定有一个'或"，所以它切断了你正在构建的字符串。

尝试转义

按照Felix Klings的回答做，或者，如果你经常这样做，使用javascript模板/微模板。

https://developer.mozilla.org/en/JavaScript_templates

相关文章：