在JavaScript中把字符串解析成数字的教程

今天你吸猫了么
405 阅读7分钟

深入了解用JavaScript将字符串解析为数字的方法

了解用JavaScript将字符串转换为数字的多种选择

在Javascript应用程序中，我们从用户那里接受的输入数据往往是字符串格式的。表格和输入字段就是最大的例子。但我们的应用程序不可能总是将所有这些数据作为字符串本身来处理。特别是当涉及到像年龄、价格或数量这样的输入时，应用程序可能需要在处理之前将它们转换为 "数字 "类型。

正因为如此，我们在编码时必须进行许多字符串解析操作。为了完成这项任务，Javascript提供了不同的方法，包括parseInt和parseFloat，我们可以轻松地使用这些方法，而不需要任何麻烦。但是，从这些方法中，哪一个适合哪种类型的任务？在使用这些方法时，你应该期待什么样的行为？

在本教程中，我们将深入研究Javascript中的这些解析方法，找出它们的相同点和不同点，并了解何时使用它们中的每一个。所以，不要再拖延了，让我们开始吧。

用parseInt()将Javascript字符串解析为整数

Javascript的parseInt将字符串解析为整数。如果传递的字符串不包含数字，它就会返回NaN作为结果：

parseInt("10") //10 
parseInt("No number in string") //NaN

你可以用parseInt解析一个包含非数字字符的字符串，只要它以数字字符开头。在搜索数字字符时，parseInt会忽略字符串中的任何前导空白：

parseInt("12 years old") //12
parseInt("    98 pieces") //98
parseInt("new 23 members") //NaN

如果传递的字符串包含多个数字，parseInt 总是在类型转换后输出第一个数字。比如说：

parseInt("1233 90 322") //1233

当我们向parseInt传递一个十进制数字时，它只考虑小数点之前的数字字符。这种行为类似于将小数四舍五入为最接近的整数：

parseInt("23.1")  //23
parseInt("129.67 only")  //129

parseInt 还能识别数字字符串中的正负符号，并在解析后输出带有指定符号的整数。在这种情况下，符号和数字之间不应该有任何其他字符，甚至是空白：

parseInt("+87 increase")  //87
parseInt("-23 decrease")  //-23
parseInt("   -89") //-89
parseInt("  -  90") //NaN

关于Javascript的parseInt还有一点需要注意的是，它不能识别基于科学指数符号的数字。如果你传递一个这种格式的数字字符串，parseInt只提取 "e "字符出现之前的数字部分：

parseInt("123e100") //123

解释特定小数位的数字

通常情况下，parseInt 假设任何传递的输入字符串都是小数点10（十进制）的数字。但是parseInt提供了一种方法，可以使用第二个参数来改变所考虑的小数位数，该参数接受从2到36的特定小数位数值。这样，我们就可以在一个步骤中解析二进制（2）、八进制（8）、十六进制（16）或任何其他进制的数字。

在这里，我们将解析不同弧度的数字，看看parseInt如何使用这个弧度参数：

parseInt("13", 8) //11
parseInt("f2", 16) //242
parseInt("101", 2) //5
parseInt("323", 2) //NaN

另外，如果你传递一个以 "0x "或 "0X "开头的数字字符串，即使没有指定弧度，parseInt也会自动假定这个数字是十六进制（而不是十进制）：

parseInt("0xa1") //161
parseInt("0XF1") //241

Number.parseInt

parseInt方法在Javascript的Number对象中定义了一个相同名称的对应方法。而这个Number.parseInt的作用与全局的parseInt方法相同：

Number.parseInt("10") //10 
Number.parseInt("No number in string") //NaN
Number.parseInt("12 years old") //12
Number.parseInt("    98 pieces") //98
Number.parseInt("new 23 members") //NaN
Number.parseInt("23.1")  //23
Number.parseInt("129.67 only")  //129
Number.parseInt("+87 increase")  //87
Number.parseInt("-23 decrease")  //-23

用Javascript parseFloat()解析小数

Javascript的parseFloat的行为和parseInt很相似，只是它除了可以解析整数外，还可以解析浮点数。所以，如果你想用你的代码解析小数，parseFloat是你应该选择的方法，而不是parseInt。

我们在parseInt下讨论的大多数规则也适用于parseFloat方法。下面是对这些规则的总结：

  • 可以解析一个带有非数字字符的字符串中的数字，只要它以数字开头。
  • 如果字符串不是以数字开头的，则返回NaN。
  • 忽略前导或尾部的空白处。
  • 只解析字符串中的第一个数字。
  • 识别字符串中的+和-符号，并输出带有正确符号的解析数字。

现在，让我们看看parseFloat方法在这些规则下如何处理不同类型的输入。

parseFloat("10.345")  //10.345
parseFloat("No number in string") //NaN
parseFloat("45.23 in height")  //45.23
parseFloat("    900.23 hours")  //900.23
parseFloat("closing 34.234")  //NaN
parseFloat("+1233.1 distance") //1233.1
parseFloat("-122.3454 reduction")  //-122.3454
parseFloat("   -122.1")  //-122.1
parseFloat("233.11 54.1 53.1")  //233.11

parseFloat也可以解析整数，在操作过程中不将其转换为浮点数。比如说：

parseFloat("454")  //454
parseFloat("11 people")  //11

然而，与parseInt不同的是，parseFloat并没有给你一个选项来指定所传数字的弧度。相反，它假定所有的输入字符串都是弧度为10的。它也不支持在输入中使用基于 "0x "的十六进制符号。

parseFloat("0xff") //0

与parseInt相比，parseFloat的一个优势是它可以处理使用科学符号的情况。下面是几个解析用这种符号写的数字的例子：

parseFloat("1.345e6")  //1345000
parseFloat("123e100") //1.23e+102
parseFloat("3.15e-4") //0.000315

parseFloat 还可以识别并解析字符串输入中的 "无穷大"。

parseFloat("Infinity")  //Infinity
parseFloat("-Infinity")  //-Infinity

Number.parseFloat

与 parseInt 类似，parseFloat 也有一个对应的 Number.parseFloat 方法，其工作方式与全局方法相同。下面是它的几个使用例子：

Number.parseFloat("10.345")  //10.345
Number.parseFloat("No number in string") //NaN
Number.parseFloat("45.23 in height")  //45.23
Number.parseFloat("    900.23 hours")  //900.23
Number.parseFloat("closing 34.234")  //NaN
Number.parseFloat("+1233.1 distance") //1233.1
Number.parseFloat("-122.3454 reduction")  //-122.3454
Number.parseFloat("   -122.1")  //-122.1
Number.parseFloat("233.11 54.1 53.1")  //233.11

用Number()转换字符串到数字

除了parseInt和parseFloat方法之外，Javascript还提供了第三种将字符串解析为整数的方法。它就是Javascript的Number()函数。但是，它只能处理包含100%数字字符的字符串，除了前面和后面的空白。

不过，除了这个区别之外，Number函数将parseInt和parseFloat的最佳品质结合在一起。

  • 同时解析整数和浮点数：

    Number("456") //456
Number("23.11")  //23.11
Number("  329")  //329
Number("209.12  ")  //209.12

  • 对于包含非数字的输入，返回NaN：

    Number("Hey")
Number("10k")

  • 识别以科学符号书写的数字：

    Number("1.345e6")  //1345000
Number("123e100")  //1.23e+102
Number("3.15e-4")  //0.000315

  • 识别有符号的数字：

    Number("+145")  //145
Number("-56")  //-56

  • 支持不同进制的数字的字面表示，如 "0x"（十六进制）、"0o"（八进制）和 "0b"（二进制）：

    Number("0x9a")  //154
Number("0b101") //5
Number("0o76")  //62

当提供某些类型的输入时，Number函数会以一种特殊的方式表现出来。例如，它对空和空字符串输入返回0。另外，与parseFloat类似，它在解析字符串时接受 "Infinity "作为有效的数值。

Number(null)  //0
Number("")  //0
Number("Infinity")  //Infinity
Number("-Infinity")  //-Infinity

用单数(+)运算符解析字符串

Javascript允许我们使用单数运算符或加号直接将纯数字的字符串转换为数字类型。它的行为或多或少与Number函数相同。下面是几个单数运算符的例子。

+"456"  //456
+"23.11"  //23.11
+"  329" //329
+"209.12  "  //209.12
+"1.345e6"  //1345000
+"123e100"  //1.23e+102
+"3.15e-4"  //0.000315
+"+145"  //145
+"-56"  //-56
+"0x9a"  //154
+"0b101" //5
+"0o76"  //62
+null  //0
+""  //0
+"Infinity"  //Infinity
+"-Infinity"  //-Infinity

总结

正如我们在本教程中所看到的，Javascript提供了许多方法，我们可以用来将字符串转换成数字。虽然这些方法有很多相似之处，但它们都有独特的功能，使它们适合不同的用例和要求。通过我们今天所讲的内容，我希望你能在未来挑选出最合适的解析方法，而不会出现任何困惑和错误。

谢谢你的阅读!

avatar
文章
阅读
粉丝