將整數和字符串連接到單個字符串

我想將一組整數和字符串連接成一個長字符串用於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 tomc

您需要考慮運算符的優先級和關聯性。有一些規則支配像'+'和'-'這樣的運算符與其操作數的關聯。你假設它只是知道你想在某些地方進行數學運算，而在其他地方進行字符串連接，並且它會爲你解決問題。這不是它的方式。遵循的規則是，現在正在對無法轉換爲數字的字符串執行數學運算。 – 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);

來源

2014-09-28 18:01:36

將整數和字符串連接到單個字符串

回答

相關問題