JavaScript中将字符串转换为数字的七种方法总结

 更新时间:2022年09月03日 12:08:07   作者:allway2  
在js的使用中往往伴随着有格式带来的问题,下面这篇文章主要给大家介绍了关于JavaScript中将字符串转换为数字的七种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

1. 使用 parseInt()

parseInt()解析一个字符串并返回一个整数。允许空格。仅返回第一个数字。

这种方法虽然有一个限制。如果您解析十进制数,它将四舍五入到最接近的整数值,并将该值转换为string。可能需要使用parseFloat()方法进行文字转换。

myString = '129' 
console.log(parseInt(myString)) // expected result: 129
 
a = 12.22
console.log(parseInt(a)) // expected result: 12

2. 使用 Number()

Number()可用于将 JavaScript 变量转换为数字。我们可以用它来转换字符串太数字。

如果该值不能转换为数字,NaN则返回。

Number("10"); // returns 10Number(" 10 "); // returns 10Number("10.33"); // returns 10.33

3. 使用一元运算符 (+)

一元加号运算符 ( +) 在其操作数之前并计算其操作数,但如果尚未将其转换为数字,则尝试将其转换为数字。

const x = 25;
const y = -25;
console.log(+x); // expected output: 25
console.log(+y); // expected output: -25
console.log(+''); // expected output: 0

4.使用parseFloat()

parseFloat()解析一个字符串并返回一个数字。允许空格。仅返回第一个数字。

parseFloat("10");        // returns 10
parseFloat("10.33");     // returns 10.33
parseFloat("10 20 30");  // returns 10
parseFloat("10 years");  // returns 10
parseFloat("years 10");  // returns NaN

5. 使用 Math.floor()

Math.floor()函数返回小于或等于给定数字的最大整数。这对于十进制数字可能有点棘手,因为它将最接近的整数的值返回为Number。

str = '1222'
console.log(Math.floor(str)) // returns 1222
 
a = 12.22
Math.floor(a) // expected result: 12

6.乘以数字

将字符串值乘以1不会改变值,并且默认情况下它会转换为数字。

str = '2344'
console.log(str * 1) // expected result: 2344

7. 双波浪号 (~~) 运算符

我们可以使用双波浪号运算符将字符串转换为数字。

str = '1234'
console.log(~~str) // expected result: 1234
negStr = '-234'
console.log(~~negStr) // expected result: -234

这是性能方面提到的方式的比较。

补充:js 强制转换 为数字类型

/*
 * 将其他的数据类型转换为Number
 *      转换方式一:
 *         使用Number()函数
 *             - 字符串 --> 数字
 *                 1.如果是纯数字的字符串,则直接将其转换为数字
 *                 2.如果字符串中有非数字的内容,则转换为NaN
 *                 3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
 *             - 布尔 --> 数字
 *                 true 转成 1
 *                 false 转成 0
 *
 *             - null --> 数字     0
 *
 *             - undefined --> 数字 NaN
 *
 * 转换方式二:
 *         - 这种方式专门用来对付字符串
 *         - parseInt() 把一个字符串转换为一个整数
 *         - parseFloat() 把一个字符串转换为一个浮点数
 */
 
var a = "123";
 
//调用Number()函数来将a转换为Number类型
a = Number(a);
 
a = false;
a = Number(a);
 
a = null;
a = Number(a);
 
a = undefined;
a = Number(a);
 
a = "123567a567px";
//调用parseInt()函数将a转换为Number
/*
 * parseInt()可以将一个字符串中的有效的整数内容去出来,
 *     然后转换为Number
 */
a = parseInt(a);
 
/*
 * parseFloat()作用和parseInt()类似,不同的是它可以获得有效的小数
 */
a = "123.456.789px";
a = parseFloat(a);
 
/*
 * 如果对非String使用parseInt()或parseFloat()
 *     它会先将其转换为String然后在操作
 */
a = true;
a = parseInt(a);
 
a = 198.23;
a = parseInt(a);
 
console.log(typeof a);
console.log(a);
 
/*
 * 在js中,如果需要表示16进制的数字,则需要以0x开头
 *             如果需要表示8进制的数字,则需要以0开头
 *             如果要要表示2进制的数字,则需要以0b开头
 *                 但是不是所有的浏览器都支持
 *     
 */
 
//十六进制
a = 0x10;
a = 0xff;
a = 0xCafe;
 
//八进制数字
a = 070;
 
//二进制数字
//a = 0b10;
 
//向"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析
a = "070";
 
//可以在parseInt()中传递一个第二个参数,来指定数字的进制
a = parseInt(a,10);
 
console.log(typeof a);
console.log(a);

总结

到此这篇关于JavaScript中将字符串转换为数字的七种方法的文章就介绍到这了,更多相关js字符串转换为数字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js canvas实现圆角图片

    js canvas实现圆角图片

    这篇文章主要为大家详细介绍了js canvas实现圆角图片效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • javascript实现的LI列表输出,隔行同色的代码

    javascript实现的LI列表输出,隔行同色的代码

    javascript实现的LI列表输出,隔行同色的代码...
    2007-10-10
  • js实现动态时钟

    js实现动态时钟

    这篇文章主要为大家详细介绍了js实现动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 深入了解TypeScript中的映射类型

    深入了解TypeScript中的映射类型

    在 TypeScript 中,映射类型可以帮助我们避免编写重复的代码,它可以根据现有类型和定义的一些规则来创建新类型。本文我们就来看一下什么是映射类型以及如何构建自己的映射类型
    2022-08-08
  • JavaScript时间操作之年月日星期级联操作

    JavaScript时间操作之年月日星期级联操作

    这篇文章主要介绍了JavaScript时间操作之级联日期选择操作,涉及到年、月、日、星期,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS获取鼠标相对位置的方法

    JS获取鼠标相对位置的方法

    这篇文章主要介绍了JS获取鼠标相对位置的方法,涉及javascript事件响应及针对页面元素属性的动态操作技巧,需要的朋友可以参考下
    2016-09-09
  • 图解JavaScript中的this关键字

    图解JavaScript中的this关键字

    这篇文章利用图片讲解的方式向大家解释了JavaScript中的this关键字,JavaScript this 到底指向什么?从这篇文章中大家可以得到想要的答案,需要的朋友可以参考下
    2015-10-10
  • 详解JavaScript中localStorage使用要点

    详解JavaScript中localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难、容量有限的问题,对js localstorage的使用相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • flexigrid 参数说明

    flexigrid 参数说明

    flexigrid 参数说明,需要的朋友可以参考下。
    2010-11-11
  • 详解javascript中对数据格式化的思考

    详解javascript中对数据格式化的思考

    本篇文章主要介绍了详解javascript中对数据文本格式化的思考 ,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01

最新评论