为什么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会将整数变量强制转换为字符串变量？

回答

相关问题