爲什麼JavaScript會將整數變量強制轉換爲字符串變量？

我正在做一個項目，學校是一個網站，許多隨機的小項目。在其中一個項目中，我嵌入了一個帶有src鏈接「... blah .../Ndub1」的視頻，如果您將鏈接中的「1」更改爲例如「2」，那麼您會獲得下一個視頻。現在我正在嘗試編寫一個javaScript腳本，該腳本將在單擊按鈕時將該數字更改爲「數字+ 1」或「數字-1」。這裏是我的網站的源代碼：爲什麼JavaScript會將整數變量強制轉換爲字符串變量？

<html> 
    <head> 
     <!-- some stuff --> 
     <script>   
      var e = "1"; 
      var s = "0"; 
      function narutoGetEpisodeGen() { 
       var a, link, link2; 
       e = document.getElementById('episodeInput').value 
       if (document.getElementById('naruto').checked) { 
        a = "Ndub" + document.getElementById('episodeInput').value; 
        s = 0; 
       } 
       else { 
        a = "Nshipdub" + document.getElementById('episodeInput').value; 
        s = 1; 
       } 
       link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">'; 
       link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>'; 
       document.getElementById('embeddedVideoDiv').innerHTML = link; 
       document.getElementById('videoVidDiv').innerHTML = link2; 
       document.getElementById('episodeInput').value = ""; 
      } 

      function oneForward() { 
       var a, z, link; 
       if (s == 0) { 
        z = eval(parseInt(e)+1); 
        a = "Ndub"+z.toString(); 
        e += 1; 
       } 
       else { 
        z = eval(parseInt(e)+1); 
        a = "Nshipdub"+z.toString(); 
        e += 1; 
       }   
       link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">'; 
       link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>'; 
       document.getElementById('embeddedVideoDiv').innerHTML = link; 
       document.getElementById('videoVidDiv').innerHTML = link2; 
      } 

      function oneBack() { 
       var a, x, link; 
       if (s == 0) { 
        x = eval(parseInt(e)-1); 
        a = "Ndub"+x.toString(); 
        e -= 1; 
       } 
       else { 
        x = eval(parseInt(e)-1); 
        a = "Nshipdub"+x.toString(); 
        e -= 1; 
       } 
       link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">'; 
       link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>'; 
       document.getElementById('embeddedVideoDiv').innerHTML = link; 
       document.getElementById('videoVidDiv').innerHTML = link2; 
      } 
     </script> 
     <!-- some stuff --> 
    </head> 
    <body> 
     <!-- some stuff --> 
     <p>Number of episode: <input type="text" id="episodeInput"/></p> 
     <p><label><input type="radio" name="narutoSeason" id="naruto"> Naruto</label></p> 
     <p><label><input type="radio" name="narutoSeason" id="narutoShippuden"> Naruto Shippuden</label></p> 
     <p><button type="button" id="submitButton" onclick="narutoGetEpisodeGen()">Submit</button></p> 
     <div id="embeddedVideoDiv"> 
      <embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/Ndub1&amp;plugins=timeslidertooltipplugin-2" height="480px" width="720px"> 
     </div> 
     <p><button type="button" onClick="oneBack()">Previous</button> <button type="button" onClick="oneForward()">Next</button></p> 
     <!-- some stuff -->  
    </body> 
</html>

所以主要問題是，我添加或減去1的部分數字。第一次使用oneForward按鈕時，它的工作原理正常，但下次我使用該按鈕時，它只會將「1」添加到我開始使用的情節數量。然後，如果我使用相同的按鈕，錯誤不斷重複，但如果我使用另一個按鈕，並且從該點開始正常工作，則會停止發生錯誤。爲了讓我自己更加清楚，我將輸入一些我正在做什麼的例子。

- Type in the input(id="episodeInput"): 3 > click on input(id="narutoShippuden") > click the button(id="submitButton") > observe how the function("narutoGetEpisode") did its job perfectly > click the button(onClick="oneForward") > observe the function working just fine (transformed the number from "3" to "4") > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "31" > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "311" > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "3111" > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "31111" > click the button(onClick="oneBack") > observe the function working just fine (transformed the number from "31111" to "31110") > from here on, both buttons act just fine 
- Type in the input(id="episodeInput"): 3 > click on input(id="narutoShippuden") > click the button(id="submitButton") > observe how the function("narutoGetEpisode") did its job perfectly > click the button(onClick="oneForward") > observe the function working just fine (transformed the number from "3" to "4") > click the button(onClick="oneBack") > observer how the link in embedded part transformed the number into "30" > click the button(onClick="oneForward") again > observe how the button did its job okay (transforms the number from "30" to "31") > click the button(onClick="oneForward") again > observe how the button did its job okay (transforms the number from "31" to "32") > click the button(onClick="oneBack") again > observe how the button did its job okay (transforms the number from "32" to "31") > from here on, both buttons act just fine 
- Type in the input(id="episodeInput"): 3 > click on input(id="narutoShippuden") > click the button(id="submitButton") > observe how the function("narutoGetEpisode") did its job perfectly > click the button(onClick="oneBack") > observe the function working just fine (transformed the number from "3" to "2") > click the button(onClick="oneBack") > observe the function working just fine (transformed the number from "2" to "1") > from here on, both buttons act just fine

我還應該提到，這發生在所有三個，Mozilla，Chrome和IE（都是最新的）。

所以我絞盡腦汁通過這個問題，搜索我試過很多變種，以修復代碼的論壇，所以現在我要去I型測試工作simmilarly奇怪或者更糟的事情：

要明確我只在標題「腳本」標籤cnanged的代碼，更準確地說，只有在這行：

function oneForward() { 
       var a, z, link; 
       if (s == 0) { 
        z = eval(parseInt(e)+1); 
        a = "Ndub"+z.toString(); 
        e += 1; 
       } 
       else { 
        z = eval(parseInt(e)+1); 
        a = "Nshipdub"+z.toString(); 
        e += 1; 
       }   
       link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">'; 
       link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>'; 
       document.getElementById('embeddedVideoDiv').innerHTML = link; 
       document.getElementById('videoVidDiv').innerHTML = link2; 
      } 

      function oneBack() { 
       var a, x, link; 
       if (s == 0) { 
        x = eval(parseInt(e)-1); 
        a = "Ndub"+x.toString(); 
        e -= 1; 
       } 
       else { 
        x = eval(parseInt(e)-1); 
        a = "Nshipdub"+x.toString(); 
        e -= 1; 
       } 
       link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">'; 
       link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>'; 
       document.getElementById('embeddedVideoDiv').innerHTML = link; 
       document.getElementById('videoVidDiv').innerHTML = link2;

所以我改變了

z = eval(parseInt(e)+1); 
a = "Nshipdub"+z.toString();

到

z = (parseInt(e)+1); 
a = "Nshipdub"+z.toString();

或

z = (e+1); 
a = "Nshipdub"+z.toString();

或

a = "Nshipdub"+(e+1);

或

a = "Nshipdub"+(e*1+1);

或

a = "Nshipdub"+(parseInt(e)+1);

或

a = "Nshipdub"+(parseInt(e)*1+1);

或

a = "Nshipdub"+(parseInt(e)+1).toString();

和其他一些人，我甚至不記得了。無論如何，他們都不是更好。

我真的很感謝這一點的幫助，也解釋了爲什麼上面的例子不會工作，尤其是那些與另一個變量，因爲我看了論壇上的例子說>「string」+ 3 + 1「<等於>「string +」3「+」1「<並且> 1 + 5 +」string「<等於> 6 +」string「<。

來源

2014-10-05 markman4897

「爲什麼JavaScript將整數變量強制轉換爲字符串變量？「

因爲，呃...

var e = "1";

你將它定義爲一個字符串

e = document.getElementById('episodeInput').value

兩次

嘗試：？？

var e = 1;

和：

e = parseInt(document.getElementById('episodeInput').value,10);

來源

2014-10-05 10:24:22

非常感謝。我甚至沒有想到這個方向，但試圖使它在x和z變量中爲整數。現在所有的工作，但出於好奇，爲什麼不會工作，當它是這樣的：x = parseInt（e）+1; ？此外，當我使用上面的代碼時，這是什麼奇怪的小故障，第一次我按下一個按鈕，它將工作（添加爲整數），第二個它將添加爲字符串？ – markman4897 2014-10-05 11:24:01

爲什麼JavaScript會將整數變量強制轉換爲字符串變量？

回答

相關問題