javascript - 「+変数+」とはどういう意味ですか?

Question

これはどういう意味ですか: '+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>');

実際、なぜこれが機能するのかわかりません...

value= window_value 
img id= w+window_value

、セレクター $('#(w+window_value)')を使用 して要素を見つけます。失敗する必要があります。
このオペレーターは何ですか？'+variable+' では
、なぜ "'+variable+'" という奇妙な表記を使用する必要があるのでしょうか?
この表記法はいつ使用する必要がありますか?

Answer 1

このオペレーターは何ですか？'+変数+'

それはオペレーターではありません。

'文字列リテラルを終了します

+連結演算子です。

variable文字列変数です

+別の連結演算子です。

'新しい文字列リテラルを開始します。

そして、なぜ奇妙な表記法を使用する必要があるの"'+variable+'"でしょうか?

2 つの文字列リテラル"のデータには文字が含まれています。

オブジェクトはこれを構築することです：

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

Answer 2

これは、変数からのデータを使用して動的に文字列を構築しています。

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

文字列のリテラル部分は、一重引用符または二重引用符で囲むことができます。それぞれがまったく同じことを行いますが、文字列自体にも引用符が含まれている場合は、2 つのうちの 1 つがより便利です。

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. ';

Answer 3

これは、文字列が変数と連結されることを意味します。