'+ variable +'是什么意思？

Question

这是什么:'+变量+'是什么意思？

我使用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>');

实际上,我不知道为什么这样做...如果我只是写

value= window_value 
img id= w+window_value

,并使用选择器 $('#(w + window_value)') 来查找元素.它必须失败.
这个运营商是什么？'+ variable +'
我们为什么要使用奇怪的符号"'+ variable +'"？
我们什么时候应该使用这种表示法？

Answer 1

这个运营商是什么？'+可变+'

那不是运营商.

' 结束字符串文字

+ 是一个连接运算符.

variable 是一个字符串变量

+ 是另一个连接运算符.

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

为什么我们应该使用奇怪的符号"'+variable+'"？

两个字符串文字"在其数据中包含字符.

目标是构造这个:

'<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)