js字符串转化为数字类型有哪些方法？【妙招分享】

JavaScript变量字符串类型转为数值类型有一下方法4中法方法，下面我们一个介绍。

1. Number()

使用Number()方法实现转换，语法：

变量 = Number(变量);

案例：

<script>
    var a = 1;
    var b = '100';
    var c = 'abcd';
    var d = false;
    var e = undefined;
    var f = null;
    console.log(Number(a));   // 输出为数字1
    console.log(Number(b));   // 输出为数字100
    console.log(Number(c));   // 输出为NaN （not a number 不是一个数字）
    console.log(Number(d));   // 输出为数字0(0代表false)
    console.log(Number(e));   // 输出为NAN 
    console.log(Number(f));   // 输出为数字0（Null代表0）
</script>

注意：如果变量无法转为正常的数字类型，就会被转为NaN，NaN是数字类型，代表不是一个数字。

2. parseInt()

使用parseInt()方法取整数，语法如下：

变量 = parseInt(变量);

案例：

<script>
    var a;
    var b = null;
    var b = false;
    console.log(parseInt('100'));// 输出数字 100
    console.log(parseInt('100.23'));// 输出数字 100
    console.log(parseInt('abdc'));// 输出数字 NaN
    console.log(parseInt('100.34'));// 输出数字 100
    console.log(parseInt('abc100.34'));// 输出 NaN
    console.log(parseInt(a));           // 输出 NaN
    console.log(parseInt(b));           // 输出 NaN
    console.log(parseInt(c));           // 输出 NaN
</script>

注意parseInt() 方法会从左往右开始匹配，保留字串中以数字开始的部分，并且取整数；如果开头字符串不是数字则转为NaN，null、false、undefined等特殊值也输出NaN。

3. parseFloat()

使用parseFloat()转为浮点型数字，语法：

变量 = parseFloat(变量);

案例：

<script>
    console.log(parseFloat('100.33'));    // 输出数字 100.33
    console.log(parseFloat(100.33));    // 输出数字 100.33
    console.log(parseFloat(90));    // 输出数字 90
    console.log(parseFloat('2cdef'));   // 输出数字 2
    console.log(parseFloat('cd5f'));    // 输出 NaN
    console.log(parseFloat('cdef'));    // 输出 NaN
    console.log(parseFloat(undefined));   // 输出 NaN
    console.log(parseFloat(null));    // 输出 NaN
</script>

parseFloat()和parseInt()类似，区别是会保留下小数部分。

4. 使用算数运算符转化

通过案例展示：

<script>
    var number1 = '90';
    console.log(+number1);      // 取正数输出数字 90
    console.log(-number1);      // 取负数输出数字 -90
    console.log(number1 * 0);   // 输出数字0
    console.log(number1 - 0);   // 输出数字90
    console.log(number1 + 0);   // 注意number1 + 0 输出字符串900，不是数字
</script>

以上是我们介绍的4中变量类型转为数值类型的方法，你学会了吗？如果想学习更多前端技术，加QQ：435946716获取免费HTML+CSS+JavaScript视频教程+笔记。

猜你喜欢：

怎么用css3画三角形？css绘制三角形图文教程

CSS3 box-shadow的用法|box-shadow属性详解

JavaScript动画和CSS3动画有什么区别？

CSS3如何设置颜色不透明度？

传智教育HTML&JS+前端高手班