将整数和字符串连接到单个字符串

问题描述：

我想将一组整数和字符串连接成一个长字符串用于svg动画，但是当我想要类似的东西时，我的输出似乎会导致NaN结果M15，140，L20，34 ...等将整数和字符串连接到单个字符串

HTML：

<div id="test"></div>

CSS：

#test { 
    background-color: green; 
    height: 150px; 
    width: 150px; 
}

JS：

var bubbleObj = function(el, html, cornerRad) { 
    this.html = html, 
    this.width = el.width(), 
    this.height = el.height(), 
    this.arrowWidth = el.width()/4, 
    this.arrowHeight = el.height()/8, 
    this.cornerRad = cornerRad; 

    var pathy = "M" + 
     this.cornerRad 
     + ", " + 
     this.height - this.arrowHeight 
     + ", Q" + 
     0 
     + ", " + 
     this.height - this.arrowHeight 
     + ", " + 
     0 
     + ", " + 
     this.height - this.arrowHeight - this.cornerRad 
     + ", L" + 
     0 
     + ", " + 
     this.cornerRad 
     + ", Q" + 
     0 
     + ", " + 
     0 
     + ", " + 
     this.cornerRad 
     + ", " + 
     0 
     + ", L" + 
     this.cornerRad + (this.width - (this.cornerRad * 2)) 
     + ", " + 
     0 
     + ", Q" + 
     this.width 
     + ", " + 
     0 
     + ", " + 
     this.width 
     + ", " + 
     this.cornerRad 
     + ", L" + 
     this.width 
     + ", " + 
     this.cornerRad + (this.height - this.arrowHeight - (this.cornerRad * 2)) 
     + ", Q" + 
     this.width 
     + ", " + 
     this.height - this.arrowHeight 
     + ", " + 
     this.width - this.cornerRad 
     + ", " + 
     this.height - this.arrowHeight 
     + ", L" + 
     (this.width/2) + (this.arrowWidth/2) 
     + ", " + 
     this.height - this.arrowHeight 
     + ", L" + 
     this.width/2 
     + ", " + 
     this.height 
     + ", L" + 
     (this.width/2) - (this.arrowWidth/2) 
     + ", " + 
     this.height - this.arrowHeight 
     + ", " +    
     ", Z"; 

     console.log(pathy); 
};   

    var bub = new bubbleObj($('#test'), "test_content", 15);

的jsfiddle： http://jsfiddle.net/p9abkmwx/

您需要考虑运算符的优先级和关联性。有一些规则支配像'+'和'-'这样的运算符与其操作数的关联。你假设它只是知道你想在某些地方进行数学运算，而在其他地方进行字符串连接，并且它会为你解决问题。这不是它的方式。遵循的规则是，现在正在对无法转换为数字的字符串执行数学运算。 – 2014-09-28 18:02:55

Agh愚蠢的错误。非常感谢！ – tomc 2014-09-28 18:09:02

答

使用括号所有算术运算的优先级。

var bubbleObj = function(el, html, cornerRad) { 
    this.html = html, 
    this.width = el.width(), 
    this.height = el.height(), 
    this.arrowWidth = el.width()/4, 
    this.arrowHeight = el.height()/8, 
    this.cornerRad = cornerRad; 

    var pathy = "M" + 
    this.cornerRad 
    + ", " + 
    (this.height - this.arrowHeight) 
    + ", Q" + 
    0 
    + ", " + 
    (this.height - this.arrowHeight) 
    + ", " + 
    0 
    + ", " + 
    (this.height - this.arrowHeight - this.cornerRad) 
    + ", L" + 
    0 
    + ", " + 
    this.cornerRad 
    + ", Q" + 
    0 
    + ", " + 
    0 
    + ", " + 
    this.cornerRad 
    + ", " + 
    0 
    + ", L" + 
    (this.cornerRad + (this.width - (this.cornerRad * 2))) 
    + ", " + 
    0 
    + ", Q" + 
    this.width 
    + ", " + 
    0 
    + ", " + 
    this.width 
    + ", " + 
    this.cornerRad 
    + ", L" + 
    this.width 
    + ", " + 
    (this.cornerRad + (this.height - this.arrowHeight - (this.cornerRad * 2))) 
    + ", Q" + 
    this.width 
    + ", " + 
    (this.height - this.arrowHeight) 
    + ", " + 
    (this.width - this.cornerRad) 
    + ", " + 
    (this.height - this.arrowHeight) 
    + ", L" + 
    ((this.width/2) + (this.arrowWidth/2)) 
    + ", " + 
    (this.height - this.arrowHeight) 
    + ", L" + 
    (this.width/2) 
    + ", " + 
    this.height 
    + ", L" + 
    ((this.width/2) - (this.arrowWidth/2)) 
    + ", " + 
    (this.height - this.arrowHeight) 
    + ", " +    
    ", Z"; 

    console.log(pathy); 
};   

var bub = new bubbleObj($('#test'), "test_content", 15);

将整数和字符串连接到单个字符串

相关推荐