Javascript “+variable+”是什么意思？

这个：“+variable+”是什么意思

我使用jQuery append方法添加一些DOM元素：

$('#story_pages').append('<div><button value="'+window_value+'" onclick= "reload_to_canvas(this.value)" ><img id="w'+window_value+'", src=white_data_URL, width="100px", height="100px"/> </button></div>');

，并使用选择器 $'w+窗口值' 找到元素。它必须失败。 这个接线员是干什么的？”+变量+' 为什么我们要使用奇怪的符号“+变量+”？

---

什么时候应该使用这种表示法？

这意味着字符串与变量连接。

这是使用变量中的数据动态构造字符串

var x = "World";
var text = "Hello " + x + ", how are you?";  

字符串的文字部分可以用单引号或双引号括起来。每一个都做完全相同的事情，但如果字符串本身也包含引号，则两个引号中的一个更方便

var text = 'Hello, "' + x + '", how are you?'; // double quotes inside
var phrase = "Hello, '" + x + "', how are you?";  // single quotes inside

报价需要匹配。Stackoverflow上的语法高亮显示使这更容易

如果字符串中需要两种引号，则必须用反斜杠转义其中一种引号

var lotsOfQuotes = ' "Gosh, O\'Neill, what have you done", he said. ';

这个接线员是干什么的？”+变量+'

那不是接线员

'结束字符串文字

+是一个串联运算符

变量是字符串变量

+是另一个连接运算符

'启动一个新的字符串文本

为什么我们要使用奇怪的符号“+变量+”

这两个字符串文本的数据中包含字符

其目的是构建：

'<element attribute="value">'

当值是变量时

var myValue = "value";
'<element attribute="' + value + '">'

通过字符串连接从代码生成代码总是会产生难看的代码，这相对来说很难维护。我会用更详细的方法来解决这个问题：

var content = $("<div>");
var button = $("<button>");
button.val(window_value);
button.on('click', function() { reload_to_canvas(this.value); });
var img = $('<img>');
img.attr('id', 'w' + window_value);
img.attr('src', 'white_data_URL');
// width and height can be handled in CSS
button.append(img)
content.append(button)
$('#story_pages').append(content)

---

+1对于具有附加好处的替代方法，例如，您可以轻松地添加一些额外的条件，并且可以使用click处理程序的闭包，而不是可以使用的闭包stringified@Quentin谢谢但是为什么value=window\u value可以得到window\u value的内容呢？我仍然需要使用连接运算符来完成这项工作？但是为什么value=window\u value可以获得window\u value的内容呢它不能，因为那个么window_值将是字符串文字中的一些字母，而不是变量名。这就是为什么必须将字符串连接在一起，或者使用DOM。@Quentin我的意思是我只写value=window\u值看起来就像一个赋值。。。这里没有字符串文字，为什么它不能工作？它是一个HTML属性值。如果您有，那么值是window_value，而不是变量window_value的内容。您有语法错误，逗号放错了：'+x+，'@poplaines:Oops，谢谢。希望现在能修好。@Thilo谢谢你。

var content = $("<div>");
var button = $("<button>");
button.val(window_value);
button.on('click', function() { reload_to_canvas(this.value); });
var img = $('<img>');
img.attr('id', 'w' + window_value);
img.attr('src', 'white_data_URL');
// width and height can be handled in CSS
button.append(img)
content.append(button)
$('#story_pages').append(content)