Wie kann ich JSON Stringify in String Javascript hinzufügen?

Question

Mein Code wie folgt aus:

<script> 
var res = ` 
     <a href="#" id="edit-image" 
      data-toggle="modal" 
      data-target="#modal-edit-image" 
      data-photo="`+JSON.stringify(photo)+`" 
     > 
      <span class="fa fa-pencil"></span> 
     </a>`;             
</script> 

Das Ergebnis console.log(photo) wie folgt aus:

Objekt {id: 5, Name: "IMziQFBIxFEFQHdjlg3mGXEVuQnwqZ5rYigX2jlq.jpeg", alt: "dea"}

Ich möchte es in JSON Zeichenfolge ändern und speichern Sie es in Variable Res

Ich mache es wie oben Code, aber wenn ich Element inspizieren und ich kopieren Sie das Element das Ergebnis wie folgt aus:

<a href="#" id="edit-image" data-toggle="modal" data-target="#modal-edit-image" data-photo="{" id":5,"name":"imziqfbixfefqhdjlg3mgxevuqnwqz5ryigx2jlq.jpeg","alt":"dea"}"=""> 
    <span class="fa fa-pencil"></span> 
</a> 

Es scheint json stringfy im Element unordentlichen

Wie kann ich es lösen?

Answer 1

JSON.stringify verwendet " als Standardzeichenfolgetrennzeichen. Nur wickeln den Wert des data-photo Attribut in ' Anführungszeichen statt " Zitate:

var res = ` 
    <a href="#" id="edit-image" 
     data-toggle="modal" 
     data-target="#modal-edit-image" 
     data-photo='${JSON.stringify(photo)}' 
    //   ^here     ^and here 
    > 
     <span class="fa fa-pencil"></span> 
    </a>`; 

Anmerkung 1: Einer der Vorteile der Verwendung von Template Literals ist, dass Sie ${} anstelle der + ... + Syntax verwenden können.

Anmerkung 2: Wenn die Eigenschaften des Objekts photo ein ' Zitat in ihnen wie in haben könnte:

var photo = {id: 5, name: "I'm here.jpg", alt: ""}; 
//       ^^^ 

dann werden Sie es wie this entkommen müssen:

JSON.stringify(photo).replace(/'/g, "'") 
//     ^^^^^^^^^^^^^^^^^^^^^^^ replace all single quotes with their escaped values 

Nach dieser letzten Methode können Sie doppelte Anführungszeichen wie im Code in der Frage beibehalten, diesmal jedoch doppelte Anführungszeichen:

var res = ` 
    <a href="#" id="edit-image" 
     data-toggle="modal" 
     data-target="#modal-edit-image" 
     data-photo="${JSON.stringify(photo).replace(/"/g, "&#34;")}" 
    //   ^here          ^and here 
    // use double quotes to surround the value of data-photo and excape " in the result of JSON.stringify 
    > 
     <span class="fa fa-pencil"></span> 
    </a>`;