JavaScript将字符串转换为号码JavaScript通常是将字符串转换为数字的一流工作。这是一件好事,因为即使是一个小型编程所做的人都知道,你不能总是认为看起来像一个数字的东西真的是一个数字。赔率很高,这真的是一个字符串。

(如果您刚刚开始使用JavaScript,那么有很多伟大的初学者在线JavaScript课程。)

请号码!

You can’t always control where the data that you’re working with comes from, or what format it was originally in. You may be getting input from another application or from stored data (perhaps a legacy database), and that input may all be in string format — including data that you need to convert to actual numbers.

那么你会怎么做呢?

最基本的

将字符串转换为数字的最简单方法是使用number()全局函数。让我们来看看它是如何工作的:

Var string_of_digits = "11.76";Var string_plus_point_five = string_of_digits + .5;var its_a_number = Number(string_of_digits);Var its_a_number_plus_point_five = its_a_number + .5;文档。写入("这里是字符串:" + string_of_digits + "
");文档。写入(“让我们添加.5到它:”+ string_plus_point_five +“
”);文档。write("将字符串转换为数字:" + its_a_number + "
"); document.write("Add .5 to it: " + its_a_number_plus_point_five + "
");

这是输出:

以下是字符串:让我们给它加上。5:将字符串转换为数字

这是真正的数字吗?

现在让我们步行一步:

首先,将string_of_digits设置为等于一个字符串:“11.76”。然后我们通过添加.5来测试它是否真的是一个字符串—结果“11.76.5”表明它是一个字符串,因为JavaScript只是添加了“”。5 "对它,好像它们都是弦。

接下来,我们使用数字()函数将其转换为数字,并将其_a_number设置为其数值。然后我们测试其__number以确保它是通过添加.5到它的实数 - 以及结果,12.26,显示它是一个实数。

我们不是号码吗?

Number()函数将处理任何具有可转换为JavaScript合法数字的值的对象,包括非字符串对象,如Date()。但是如果它不能识别值为数字,它将返回NaN (" Not a number "):

var is_it_a_number = number(“11.76.1”);document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

结论是:

是数字吗?南

十六进制的整数

然而,它将使用0x前缀,表示字符串表示一个十六进制数-但只有后面的字符串是整数:

var is_it_a_number = Number("0x125");document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

工作,向十六进制125提供十进制等价物作为输出:

是数字吗?293

但是,如果我们用非整数字符串尝试相同的事情,请看看会发生什么:

var is_it_a_number = number(“0x125.1”);document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

突然间,这不是一个数字:

是数字吗?南

解析数字,请

数字()函数非常有用,但它显然有一些限制。然而,JavaScript确实包括其他两个字符串到数字函数,这些函数相当多样化:parseint()和parsefloat()。首先,让我们来看看Parseint():

var is_it_a_number = parseint(“0x125.1”);document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

我们所做的一切都是数字()的替代Parseint(),但看看会发生什么:

是数字吗?293

取整数

Parseint()只研究了125.1的整数部分,并将其从十六进制转换为十进制;它只是忽略了它不明白的东西。

如果字符串中的第一个字符是数字,parseInt()将根据它看到的所有数字返回一个整数,直到它遇到一个非整数字符:

var is_it_a_number = parseInt("99 Luftballons was a hit in 1983");document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

parseInt()返回第一组整数:

是数字吗?99.

但是看看没有前导整数时会发生什么:

var is_it_a_number = parseint(“Nena的99 Luftballons于1983年被击中”);document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

给我们:

是数字吗?南

领先的空白

Parseint()将接受领先的空格,因此这将有效:

var is_it_a_number = parseint(“12”);

但是,它将在遇到尾随空白时停止,如以下示例所示:

var is_it_a_number = parseInt(" 12 24");

这两个例子都产生了相同的输出

是数字吗?12.

与parseint()的基础转换

并且作为第一个PARSEINT()示例显示,它将接受一个前导0x,表示十六进制数。但是还有另一个(更典型的多种)方式来告诉Parseint()使用的数字基础。看看这些例子:

var dec_num = parseInt(“101”);var hex_num = parseInt(“101”,16);var oct_num = parseInt(“101”,8);var bin_num = parseInt(“101”,2);var whatever_num = parseInt(“101”,35);文档。写入("Decimal: " + dec_num + "
");文档。写入("十六进制:" + hex_num + "
");文档。write("Octal: " + oct_num + "
"); document.write("Binary: " + bin_num + "
"); document.write("Base 35: " + whatever_num + "
");

逗号后的数字告诉parseint()使用什么基地(或基数);默认(无基质)是十进制的,上限为基部36。

十进制:101十六进制:257八进制:65二进制:5基地35:1226

沿着......

与parseInt()等价的浮点型函数是parseFloat()。顾名思义,它将字符串解析为浮点数。在很多方面,它的操作类似于parseInt()。例如,它接受前导空格,但它要求遇到的第一个非空格字符为数字,当遇到不理解的字符时停止,包括末尾空格。

但是,ParseFloat()将识别十进制,并继续解析超过十进制的数字:

var is_it_a_number = parseFloat("127.561");document.write(“它是一个数字吗?”+ is_it_a_number +“
”);
是数字吗?127.561

parsefloat()是小数

但是ParseFloat()不会接受基数,因此以下代码:

var is_it_a_number = parseFloat("127.561",16);document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

仍然产生相同的输出:

是数字吗?127.561

在一个字符串的中间

“好的,”你说,“但是如果我想要的号码是在一个字符串中间的某个地方?”

这是一个重要的点,因为经常,你想要的数字不会方便地放在字符串的开头。它可能存在于字符串中的一些非常不方便的位置,并且您可能需要在转换它之前从字符串中提取。

有几种方法可以做到这一点,这取决于字符串的性质,以及您事先知道的数字。

把它切出来

如果您知道字符串中的数字的位置,则提取它是一个相当简单的任务。最简单的方法是使用slice()方法在数字前剪掉所有内容:

var num_in_middle =“长度:275.36英寸”;var is_it_a_number = parsefloat(num_in_middle.slice(8));document.write(“它是一个数字吗?”+ is_it_a_number +“
”);
是数字吗?275.36

顾名思义,Slice()返回一个字符串;参数(8)告诉slice()将slice()从中启动 - 8个字符到字符串中。在这种情况下,由于我们不关心尾随字符,因此切片()在数字之前切除所有内容并离开尾随字符。但是,如果我们想要,我们可以告诉它到底的位置:

var num_in_middle =“长度:275.36英寸”;var is_it_a_number = parsefloat(num_in_middle.slice(8,10));document.write(“它是一个数字吗?”+ is_it_a_number +“
”);

现在切片在第十个字符停止:

是数字吗?27.

您还可以使用substr()和substring()方法从字符串内的已知位置中提取数字;两种方法以非常类似于切片()的方式操作。

使用正则表达式

但如果你不知道这个号码的位置怎么办?这是一个更常见的情况;你需要从一个字符串中拉出一个号码,但你不知道它在哪里。

那是正规表达进来的地方。正则表达式是一个漫长而复杂的主题;有几本关于他们的书,你更有可能遇到它们高级JavaScript课程而不是一个开始的课程

但是,目前,这是您需要知道的:正则表达式形成一个制作非常精确的字符串的系统;它们用于各种编程语言和编程相关的环境。JavaScript搜索(),replace()和匹配()方法使用正则表达式来搜索,替换或返回字符串的特定元素。

匹配的数字

以下示例使用匹配()方法基于正则表达式从字符串中提取数字:

var long_winded_string = "Nena's 99 Luftballons was a hit in 1983";Var match_from_string = long_winded_string.match(/\d+/g);var is_it_a_number = parseInt(match_from_string);文档。write("Raw match from string: " + match_from_string + "
");文档。写入("提取第一个数字:" + is_it_a_number + "
");

match()中的" /\d+/g "参数是一个正则表达式,告诉它查找所有(g =全局搜索)数字(\d+ =任何至少有一个数字的字符串)的子字符串。它用逗号分隔子字符串;然后使用parseInt()提取第一个数字:

原始匹配字符串:99,1983提取第一个数字:99

你可以做多少,远远超过正则表达式,但这个例子应该给你一个味道什么是可能的先进的JavaScript编程

javascript中的顶级课程

现代JavaScript Bootcamp课程(2021)
斯蒂芬·林德里尔斯蒂尔斯蒂尔
4.7 (7,085)
JavaScript Bootcamp - 构建现实世界应用程序
George Lomidze, Lasha Nozadze, Code And Create
4.7 (1,135)
畅销书
20个与vanilla javascript的网站项目
布拉德遍历
4.8 (4,691)
50天的50个项目 - HTML,CSS和JavaScript
布拉德特雷德,弗洛林流行
4.7 (3,952)
JavaScript中的面向对象编程
Mosh Hamedani.
4.7 (2977)
完整的JavaScript课程2021:从零到专家!
乔纳斯Schmedtmann
4.7 (106691)
畅销书
JavaScript - 完整指南2021(初学者+高级)
CaximilianSchwarzmüller的Academind,MaximilianSchwarzmüller
4.7 (14766)
JavaScript:高级概念(2021)
安德烈Neageie.
4.7 (8,252)
JavaScript Web项目:20个项目构建投资组合
Andrei Neagoie, Jacinto Wong
4.7 (1,785)
初学者的JavaScript基础知识
Mosh Hamedani.
4.5 (10,942)
畅销书
JavaScript圣经- JavaScript训练营2021年
Bogdan Stashchuk.
4.7 (1,216)

更多JavaScript课程

JavaScript的学生也会学到

赋予你的团队。引领行业。

通过Udemy为Business获取组织的在线课程和数字学习工具库的订阅。

请求演示