JavaScript字符串转数字的5种方法及其陷阱

JavaScript字符串转数字的5种方法及其陷阱

摘要 :JavaScript 是一个神奇的语言,字符串转数字有 5 种方法,各有各的坑法!

本文采用意译,版权归原作者所有

String 转换为 Number 有很多种方式,我可以想到的有 5 种!

parseInt(num); // 默认方式 (没有基数)
parseInt(num, 10); // 传入基数 (十位数)
parseFloat(num); // 浮点数
Number(num); // Number 构造器
~~num; //按位非
num / 1; // 除一个数
num * 1; // 乘一个数
num -
0 + // 减去0
    num; // 一元运算符 "+"

选择哪一种呢?什么时候选择它?为什么选择这种它?我们逐一进行分析,并解析每种方式的常见陷阱。

parseInt

根据 JsPerf.com 的基准测试,大多数浏览器对 parseInt 的响应最佳。虽然它是最快的方式,但使用 preseInt 会碰到一些常见陷阱:

parseInt("08"); // returns 0 部分老浏览器.
parseInt("44.jpg"); // returns 44

parseInt: 没有传入基数时,默认是传入的基数为 10 parseInt(num, 10),如果你不知道 num 属性的类型,不要使用 parseInt 进行字符串转数字。

parseFloat

如果你不解析 16 进制数,这是一个非常好的选择。例如:

parseInt(-0xff); // returns -255
parseInt("-0xFF"); // returns -255
parseFloat(-0xff); // returns -255
parseFloat("-0xFF"); // returns 0

注意:字符串中的负十六进制数字是一个特殊情况,如果你用 parseFloat 解析,结果是不正确的。为了避免程序出现 NaN 的情况,应该检查转化后的值。

parseFloat("44.jpg"); // return 44

parseFloat: 转换十六进制数时要小心,如果你不知道要转换对象的类型,不要使用 parseFloat。

按位非

可以把字符串转换成整数,但他不是浮点数。如果是一个字符串转换,它将返回 0;

~~1.23; // returns 1
~~"1.23"; // returns 1
~~"23"; // returns 23
~~"Hello world"; // returns 0

这是什么原理?通过翻转每个位,也称为数字的 A1 补码。你可以使用它,但注意只能用来存储整数。所以通常情况不要用它,除非你能确定这个数是在 32 位整数之间的值(因为调用的 ToInt32 的规范)。

按位非:用它确保输入中没有字符,仅用于整数。

Number

Number 与以上提及的转换方式一样存在这样的问题,解析时试图找出你给他的数字:

Number("023"); // returns 23
Number(023); // returns 19

注意:023 实际上是一个八进制数,无论你怎么做,都是返回 19;对于没有单引号或双引号的十六进制数一样。

Number 也是 JsPerf 中最慢的之一。

Number:几乎不用它。

一元运算符

"1.23" * 1; // returns 1.23
"0xFF" - 0; // returns 255
"0xFF.jpg" / 1 + // returns NaN
    "023"; // returns 23

一元运算符与其它的解析方式不同,如果是一个 NaN 值,那么返回的也是 NaN 。这是我最喜欢的数值转换方式,因为我认为任何带有字符的对象都不应该被视为 0 或者根据他有多少位来“猜”。我基本使用 + 操作符,因为这个方式不容易混淆。虽然 -0 的用法也很好,但它并没有很好的表达转换为数字的本意。

note:补充因为js的字符串的连接机制‘1’+0结果位10,所以+号无法使用,可以选择使用别的方式)

字符串转换为数字的方式总结

负十六进制数字符串转换为数字时。应首先将任何其转换为 String(例如通过 + "" ),然后使用一元运算符或带基数的 parseInt 解析为数字。但是结果不是 NaN 的数值时,使用 parseFloat 更为合适。

原文链接:https://www.cnblogs.com/qiul-ing/p/17296416.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript字符串转数字的5种方法及其陷阱 - Python技术站

(0)
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • Javascript类定义语法,私有成员、受保护成员、静态成员等介绍

    JavaScript类定义语法是一种创建类的方式,允许您定义类并定义其属性和方法。在JavaScript中,类定义是通过ES6提出的class关键字来完成的。类定义语法通常包含类的名称、构造函数和成员定义。 类的定义方式 类定义语法的一般格式是: class MyClass { constructor(/* 构造函数参数 */) { // 构造函数初始化代码…

    JavaScript 2023年5月27日
    00
  • Angular服务Request异步请求的实例讲解

    下面是关于“Angular服务Request异步请求的实例讲解”的完整攻略。 标题:Angular服务Request异步请求的实例讲解 什么是Angular服务Request? Angular服务Request是Angular框架内置的一个服务,主要用于发送异步HTTP请求。Request服务是通过Angular注入系统使用的,因此我们只需要在组件或其他服务…

    JavaScript 2023年6月11日
    00
  • JS身份证信息验证正则表达式

    下面是JS身份证信息验证正则表达式的完整攻略: 什么是身份证号码 身份证号码是我国公民的唯一身份标识,由18位数字和字母组成,其中最后一位可能是数字或字母X,具有以下含义: 前6位是地址码,表示身份证持有人的行政区划代码; 7到14位是出生日期码,表示身份证持有人的出生年月日; 15到17位称为顺序码,表示在同一地址码区域内,对同年、同月、同日出生的人员编定…

    JavaScript 2023年5月19日
    00
  • JS添加删除一组文本框并对输入信息加以验证判断其正确性

    为了实现“JS添加删除一组文本框并对输入信息加以验证判断其正确性”,我们需要分为两个步骤来进行: 添加和删除文本框 对输入信息进行验证判断 下面详细讲解一下实现的过程。 添加和删除文本框 在HTML文件中,我们可以定义一个包含添加和删除按钮的表单。 <form> <div id="textboxes"> <!…

    JavaScript 2023年6月11日
    00
  • vue整合百度地图显示指定地点信息

    下面我会为您介绍Vue整合百度地图显示指定地点信息的完整攻略。 步骤一:申请百度地图开发者账号和JavaScript API密钥 首先需要申请百度地图开发者账号,然后在开发者中心获取JavaScript API密钥。 步骤二:安装百度地图JavaScript API SDK 在Vue项目中使用npm安装百度地图JavaScript API SDK,并在Vue…

    JavaScript 2023年5月19日
    00
  • js获取字符串最后一位方法汇总

    JS获取字符串最后一位方法汇总 在JS开发过程中,获取字符串最后一位是一个很常见的需求。下面将对常见的获取字符串最后一位的方法进行汇总并做详细讲解。 方法一:使用字符串的slice方法 使用字符串的slice方法可以获取字符串从指定位置开始到指定位置结束的子串,当指定结束位置为-1时,即可得到字符串的最后一个字符。 var str = ‘hello’; va…

    JavaScript 2023年5月28日
    00
  • js escape,unescape解决中文乱码问题的方法

    对于想要在 URL 参数中包含中文字符的情况,我们必须使用一些特殊的方法进行转义和解码,以确保字符不会在传输过程中被破坏。 一种常见的解决方案是使用 escape 和 unescape 函数进行转义和解码,它们是 JavaScript 中的内置函数,可以直接使用。它们可以将任何字符转义为 %XX 格式,其中 XX 是字符的 ASCII 码的十六进制表示。例如…

    JavaScript 2023年5月19日
    00
  • 解析javascript中鼠标滚轮事件

    下面是解析 JavaScript 中的鼠标滚轮事件的完整攻略: 什么是鼠标滚轮事件? 鼠标滚轮事件(mousewheel 事件)指的是当用户通过鼠标滚轮滚动时触发的事件。在 JavaScript 中,我们可以使用 mousewheel 事件来监听用户的鼠标滚轮操作。 如何监听鼠标滚轮事件? 在 JavaScript 中,可以通过以下两种方式来监听鼠标滚轮事件…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部