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中变量类型转为数值类型的方法,你学会了吗?如果想学习更多前端技

posted @ 2022-04-13 08:30  技术颜良  阅读(2643)  评论(0编辑  收藏  举报