JS字符串转换成数字的一种常用方法，三实例在线编辑

JS通过HTML的input获取的输入值的数据类型，一般情况下是字符串类型，与之类似，在鄙人接触过的几门计算机编程语言当中，通过键盘获取到的输入，不管是什么类型的数据，一般情况下也会成为字符串的类型（鄙人对python相对较熟，python的input获取到的一般为str类型的），如果不对其进行相应的数据类型的转换而直接进行相关的程序运算，如加减乘除的运算，便可能产生程序上的bug。接下来的第一个实例，先来看看，JS从HTML的input输入框获取到的键盘输入的值是什么类型的，如下：

---

JS从HTML的input获取的键盘输入类型

<input type='text' id='e1'><br><br>
<button class='btn btn-default' onclick='getValue()'>查看值类型</button>
<script>
  function getValue(){
  	var a = document.getElementById('e1').value;
  	alert(typeof(a))  //弹出值为string
  }
</script>

试一试

JS字符串转换成数字的方法

JS将字符串转换成数字的方法自然不止一种，这里介绍的一种是鄙人自己比较常用的，就是用过Number()这一JS的内置函数来进行转换，不仅可以转换整型，也可以转换浮点型，如果无法转换，则返回NaN：

<input type='text' id='e2'><br><br>
<button class='btn btn-default' onclick='setValue()'>转换数据类型</button>
<script>
  function setValue(){
  	var b = document.getElementById('e2').value;
    b = Number(b)
  	alert(b + ' ' + typeof(b))
  }
</script>

试一试

代码解析

如上代码，当input输入框中输入的值为非数字时，通过Number()函数的转换，虽然typeof()返回的仍然是number，但值则Number()返回的值却是NaN。

---

拓展：为什么要进行数据转换

如果不对HTML的input中获取的值进行相应的转换，直接进行“+”的运算，一般会得到一个拼接起来的字符串的值，而不是一个数字值，如下实例：

<input type='text' id='e3'><br><br>
<button class='btn btn-default' onclick='addValue()'>加1等于</button>
<script>
  function addValue(){
  	var c = document.getElementById('e3').value;
    var d = c + 1 //可以将“+”换成其它的符号试一试
  	alert(d + ' ' + typeof(d))
  }
</script>

试一试