如何在 JavaScript 中把字符串转换成数字
- 使用
Number()
函数 - 使用
parseInt()
函数 - 使用
parseFloat()
函数 - 使用加号运算符(
+
) - 字符串乘以数字 1
- 字符串除以数字 1
- 从字符串中减去数字 0
- 使用按位非运算符(
~
) - 使用
Math.floor()
函数 - 使用
Math.ceil()
函数 - 使用
Math.round()
函数
如何在 JavaScript 中使用 Number() 函数将一个字符串转换成一个数字
将字符串转换成数字的一种方法是使用 Number()
函数。
在这个例子中,我们有一个名为 quantity
的字符串,其值为 "12"
。
const quantity = "12";
如果我们对 quantity
使用 typeof
运算符,那么它将返回字符串的类型。
console.log(typeof quantity); //string
我们可以使用 Number
函数将 quantity
转换为数字,如图所示:
Number(quantity)
我们可以通过再次使用 typeof
操作符来检查它现在是一个数字。
console.log(typeof Number(quantity)); //number
如果你试图传入一个无法转换为数字的值,那么返回值将是 NaN
(Not a Number 非数字)。
console.log(Number("awesome")); //NaN
另一种将字符串转换成数字的方法是使用 parseInt()
函数。这个函数接收一个字符串和一个可选的进制数。
进制数是一个介于 2 和 36 之间的数字,代表数字系统中的基数。例如,进制数 2 代表二进制系统,而进制数 10 代表十进制系统。
我们可以使用先前的 quantity
变量将该字符串转换为数字。
const quantity = "12";
console.log(parseInt(quantity, 10)); //12
如果我试图将 quantity
变量改为 "12.99"
会怎样?使用 parseInt()
的结果会是 12.99 这个数字吗?
const quantity = "12.99";
console.log(parseInt(quantity, 10)); //12
正如你所看到的,结果是一个四舍五入的整数。如果你想返回一个浮点数,那么你就需要使用 parseFloat()
。
parseFloat()
函数将接收一个值并返回一个浮点数。浮点数的例子是 12.99 或 3.14。
如果我们修改前面的例子,使用 parseFloat()
,那么结果将是浮点数 12.99。
const quantity = "12.99";
console.log(parseFloat(quantity)); //12.99
如果你的字符串中有前导或尾部的空白,那么 parseFloat()
仍然会将该字符串转换成浮点数。
const quantity = " 12.99 ";
console.log(parseFloat(quantity)); //12.99
如果你的字符串中的第一个字符不能被转换为数字,那么 parseFloat()
将返回 NaN
。
const quantity = "F12.99";
console.log(parseFloat(quantity)); //NaN
加号运算符(+
)将把一个字符串转换成一个数字。该运算符将被放在操作数之前。
const quantity = "12";
console.log(+quantity); //12
我们还可以使用加号(+
)将字符串转换为浮点数。
const quantity = "12.99";
console.log(+quantity); //12.99
如果字符串值不能被转换为数字,那么结果将是 NaN
。
const quantity = "awesome";
console.log(+quantity); //NaN
另一种将字符串转换为数字的方法是使用基本的数学运算。你可以用字符串的值乘以 1,它将返回一个数字。
const quantity = "12";
console.log(quantity * 1); //12
正如你所看到的,当我们把 quantity
值乘以 1 时,就会返回数字 12。但这是如何进行的呢?
在这个例子中,JavaScript 正在将我们的字符串值转换为数字,然后执行该数学运算。 如果字符串不能被转换为数字,那么数学运算就不会起作用,它将返回 NaN
。
const quantity = "awesome";
console.log(quantity * 1); //NaN
这个方法也适用于浮点数。
const quantity = "10.5";
console.log(quantity * 1); //10.5
你也可以不乘以 1,而是用字符串除以 1。JavaScript 是将我们的字符串值转换成数字,然后进行该数学运算。
const quantity = "10.5";
console.log(quantity / 1); //10.5
另一种方法是从字符串中减去 0。像之前一样,JavaScript 是将我们的字符串值转换为数字,然后进行该数学运算。
const quantity = "19";
console.log(quantity - 0);
按位非运算符(~
)将反转一个操作数的位数,并将该值转换为 32 位有符号整数。一个 32 位有符号整数是用 32 位(或 4 个字节)表示一个整数的值。
如果我们在一个数字上使用一个按位非运算符(~
),那么它将执行这样的操作:-(x + 1)。
console.log(~19); //-20
但如果我们使用两个按位非运算符(~
),那么它将把我们的字符串转换为数字。
const quantity = "19";
console.log(~~quantity); //19
这个方法对浮点数不起作用,因为结果会是一个整数。
const quantity = "19.99";
console.log(~~quantity); //19
如果你试图对非数字字符使用这种方法,那么结果将是 0。
const quantity = "awesome";
console.log(~~quantity); //0
这种方法确实有它的局限性,因为它对那些被认为太大的数值会开始崩溃。重要的是要确保你的数字是在 32 位有符号整数的数值之间。
const quantity = "2700000000";
console.log(~~quantity); //-1594967296
另一种将字符串转换为数字的方法是使用 Math.floor()
函数。这个函数将把数字四舍五入向下取整到最接近的整数。
const quantity = "13.4";
console.log(Math.floor(quantity)); //13
就像前面的例子一样,如果我们试图使用非数字字符,那么结果将是 NaN
。
const quantity = "awesome";
console.log(Math.floor(quantity)); //NaN
Math.ceil()
函数将把一个数字四舍五入向上取整到最接近的整数。
const quantity = "7.18";
console.log(Math.ceil(quantity)); //8
Math.round()
函数将把数字四舍五入为最接近的整数。
如果我的数值是 6.3,那么 Math.round()
将返回6。
const quantity = "6.3";
console.log(Math.round(quantity)); //6
但如果我把这个值改为 6.5,那么 Math.round()
将返回7。
const quantity = "6.5";
console.log(Math.round(quantity)); //7
在这篇文章中,我向你展示了用 JavaScript 将字符串转换为数字的 11 种方法。
下一篇:没有了
相关文章:
相关推荐:
- [前端]Vue3 编写自定义指令插件的示例代码_vue.js
- [前端]vue使用element实现上传图片和修改图片功能_vue.js
- [前端]JS前端架构pnpm构建Monorepo方式管理demo_JavaScript
- [前端]Iconfont不能上传如何维护Icon_React
- [前端]jquery实现手风琴展开效果_jquery
- [前端]js前端实现word excel pdf ppt mp4图片文本等文件预览_JavaScript
- [前端]uniapp实现横屏签字版_javascript技巧
- [前端]微信小程序实现手写签名(签字版)_javascript技巧
- [前端]vue 大文件分片上传(断点续传、并发上传、秒传)_vue.js
- [前端]微信小程序实现日期范围选择_javascript技巧
- 如何在 JavaScript 中把字符串转换成数字
- 怎么理解ES6中Proxy及使用场景
- 详解vuex中的this.$store.dispatch方法
- javascript的call和apply的区别
- 为什么要使用Reflect对象
- 前端一些好学好用的代码规范-git hook+husky + commitlint
- 前端一些好学好用的代码规范-git hook+husky + commitlint
- 解决报错Node Sass does not yet support your current environment: Windows 64-bit with Unsupported
- mac安装nvm
- npm husky install .git can not be found解决方案
- CSS世界PDF电子版百度云网盘下载
- JavaScript权威指南(第6版)中文版PDF电子版百度云网盘下载
- Web服务 原理与技术[Michael P. Papazoglou]PDF电子版百度云网盘下载[44.7M]
- 基于TypeScript的HTML5游戏开发本科毕业设计PDF电子版百度云网盘下载
- 详解vue修改elementUI的分页组件视图没更新问题
- javascript的call和apply的区别
- WebKit技术内幕朱永盛PDF电子版百度云网盘下载
- JAVASCRIPT语言精髓与编程实践.周爱民.扫描版PDF电子版百度云网盘下载
- 精彩绝伦的CSS[Eric A. Meyer]PDF电子版百度云网盘下载[25.8M]
- HTML5与CSS3基础教程(第8版)[Elizabeth Castro]PDF电子版百度云网盘下载[72M]