如何將 html 屬性代碼轉換為字符串

Question

我有這個js代碼：

var my_elem = document.querySelector("[action='/cart/add']");

但我需要把它變成一個字符串，所以我可以把它用作一個字符串變量。

我怎么能這樣做？

我已經嘗試過：

'var my_elem = document.querySelector("[action=\'/cart/add\']");'

但我得到一個錯誤：

 syntax error, unexpected '"') === true) {' (T_CONSTANT_ENCAPSED_STRING)

更新

 public function start() 
{

      $my_var = '
    
    var my_elem = document.querySelector("\[action=\'\/cart\/add\']");
    
    
    var a = document.createElement("div");
        a.innerHTML = "<a href="#" style="display:none;" id="link-sz"><small><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" style="width: 20px;"><path d="M509.502 104.908L407.097 2.502c-3.337-3.337-8.73-3.337-12.067 0L2.502 395.03c-3.337 3.337-3.337 8.73 0 12.067l102.405 102.405c1.596 1.604 3.772 2.5 6.033 2.5s4.43-.896 6.033-2.5L509.5 116.975c1.604-1.596 2.5-3.772 2.5-6.033s-.894-4.43-2.498-6.034zM110.94 491.402l-90.338-90.338 380.46-380.46L491.4 110.94 110.94 491.4zm298.7-414.605c-14.115 0-25.6 11.486-25.6 25.6s11.486 25.6 25.6 25.6 25.6-11.486 25.6-25.6-11.486-25.6-25.6-25.6zm0 34.135c-4.7 0-8.534-3.832-8.534-8.534s3.823-8.534 8.534-8.534 8.534 3.832 8.534 8.534-3.823 8.534-8.534 8.534z"></path><use xlink:href="#B--inject-1"></use><use xlink:href="#C--inject-1"></use><use xlink:href="#B--inject-1" x="-51.203" y="51.195"></use><use xlink:href="#C--inject-1" x="-51.203" y="51.187"></use><use xlink:href="#B--inject-1" x="-102.405" y="102.39"></use><use xlink:href="#C--inject-1" x="-102.405" y="102.383"></use><path d="M164.643 244.95l12.066-12.07 25.6 25.593-12.066 12.07z"></path><use xlink:href="#C--inject-1" x="-153.608" y="153.595"></use><use xlink:href="#B--inject-1" x="-204.81" y="204.796"></use><use xlink:href="#C--inject-1" x="-204.81" y="204.797"></use><use xlink:href="#B--inject-1" x="-255.993" y="256.01"></use><path d="M36.634 372.976l12.068-12.068 34.135 34.135L70.77 407.11z"></path><defs><path id="B--inject-1" d="M318.253 91.37l12.068-12.068 25.603 25.603-12.068 12.068z"></path><path id="C--inject-1" d="M292.648 116.973l12.068-12.068 34.135 34.135-12.068 12.068z"></path></defs></svg><span id="link_text">MY SIZE</span></small></a>";
        a.id = \'myBtn-sz\'; ';
    
    }

Answer 1

問題是傳統的字符串文字不能跨越多行，除非您在每行的末尾放置一個反斜杠（這看起來很糟糕）。 一個簡單的解決方案是使用 back tic 而不是單引號，因此它是一個模板文字：

$my_var = ` 
    
    var my_elem = document.querySelector("[action='/cart/add']");
    
    
    var a = document.createElement("div");
        a.innerHTML = "<a href="#" style="display:none;" id="link-sz"><small><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" style="width: 20px;"><path d="M509.502 104.908L407.097 2.502c-3.337-3.337-8.73-3.337-12.067 0L2.502 395.03c-3.337 3.337-3.337 8.73 0 12.067l102.405 102.405c1.596 1.604 3.772 2.5 6.033 2.5s4.43-.896 6.033-2.5L509.5 116.975c1.604-1.596 2.5-3.772 2.5-6.033s-.894-4.43-2.498-6.034zM110.94 491.402l-90.338-90.338 380.46-380.46L491.4 110.94 110.94 491.4zm298.7-414.605c-14.115 0-25.6 11.486-25.6 25.6s11.486 25.6 25.6 25.6 25.6-11.486 25.6-25.6-11.486-25.6-25.6-25.6zm0 34.135c-4.7 0-8.534-3.832-8.534-8.534s3.823-8.534 8.534-8.534 8.534 3.832 8.534 8.534-3.823 8.534-8.534 8.534z"></path><use xlink:href="#B--inject-1"></use><use xlink:href="#C--inject-1"></use><use xlink:href="#B--inject-1" x="-51.203" y="51.195"></use><use xlink:href="#C--inject-1" x="-51.203" y="51.187"></use><use xlink:href="#B--inject-1" x="-102.405" y="102.39"></use><use xlink:href="#C--inject-1" x="-102.405" y="102.383"></use><path d="M164.643 244.95l12.066-12.07 25.6 25.593-12.066 12.07z"></path><use xlink:href="#C--inject-1" x="-153.608" y="153.595"></use><use xlink:href="#B--inject-1" x="-204.81" y="204.796"></use><use xlink:href="#C--inject-1" x="-204.81" y="204.797"></use><use xlink:href="#B--inject-1" x="-255.993" y="256.01"></use><path d="M36.634 372.976l12.068-12.068 34.135 34.135L70.77 407.11z"></path><defs><path id="B--inject-1" d="M318.253 91.37l12.068-12.068 25.603 25.603-12.068 12.068z"></path><path id="C--inject-1" d="M292.648 116.973l12.068-12.068 34.135 34.135-12.068 12.068z"></path></defs></svg><span id="link_text">MY SIZE</span></small></a>";
        a.id = 'myBtn-sz'; `;

請注意模板文字開頭和結尾處的反勾號。 您現在也不再需要轉義單引號（盡管如果您保留它們也可以使用）。