Javascript块报价

Question

    var circle;
    var love = 30;

      document.getElementById("output"). innerHTML=("

     The Circle is __ Units with an Area of __
                    <svg version='1.1'
      width='360' height='300'
      xmlns='http://www.w3.org/2000/svg'>

          <circle  cx='50%' cy='50%' r='" + love  + " %'  stroke='black' 
          stroke-width='2' fill='red'/>
        </svg>");

我知道这里存在语法错误，我确信它与块中的大量引号有关。我应该把它变成更小的弦并组合它们。有点像。=用PHP？ （块的整个要点是将SVG半径{r}设置为变量爱。） - 谢谢Josh

编辑2＃（感谢社区支持，这里有一些很好的工作代码）

            var love = 30;
            var va1 = "The Circle is __ Units with an Area of __ ";
                    var va2 =" <svg version='1.1' width='360' height='300' xmlns='http://www.w3.org/2000/svg'>" ;
                    var va3 = " <circle  cx='50%' cy='50%' r='" ;
                    var va4 =  "%'  stroke='black'  stroke-width='2' fill='red'/> </svg>";
                  document.getElementById("output"). innerHTML=(va1+ va2 + va3 + love +va4);

Answer 1

对多行字符串使用转义符号\

喜欢这个

 var circle;
 var love = 30;

  document.getElementById("output"). innerHTML=(" \
        The Circle is __ Units with an Area of __ \
                <svg version='1.1' \
                width='360' height='300' \
                xmlns='http://www.w3.org/2000/svg'> \
                <circle  cx='50%' cy='50%' r='" + love  + "%'  stroke='black'  \
               stroke-width='2' fill='red'/> \
               </svg>");

Answer 2

我会诚实地避免连接，行尾标记，并且只是构建这些元素。在我看来，这些代码将不那么脆弱，而且更容易看到。这就是我在下面所做的，包括一个小的辅助函数，用于将对象文字的成员映射到我的元素的属性：

在线查看：http://jsfiddle.net/jonathansampson/er9ys/

// References and values we'll be needing
var out = document.querySelector("body"), 
    nsp = "http://www.w3.org/2000/svg", 
    lov = 30;

// Build our message, svg element, and circle
var msg = document.createTextNode("Circle is _ Units, w/ an Area of _");
var svg = makeEl(nsp, "svg", { version: 1.1, height: 300, width: 360 });
var ccl = makeEl(nsp, "circle", { cx: "50%", cy: "50%", r: lov + "%" });

// Add children to appropriate parents
svg.appendChild(ccl);
out.appendChild(msg);
out.appendChild(svg);

// Small utility for adding attrs
function makeEl ( namespace, tag, attrs ) {
    var el = document.createElementNS(namespace, tag), prop;
    for ( prop in attrs ) 
        el.setAttribute( prop, attrs[prop] );
    return el;
}