JavaScript字符串转数字的简单实现方法


Posted in Javascript onNovember 27, 2020

由于输入框或对话框返回的类型是字符串,但当我们想使用数字类型时进行一些数学的计算时我们就需要转换为数字类型,使用parseInt、parseFloat即可。

用法:↓

parseInt(想要转换的字符串) //转为 int类型
parseFloat(想要转换的字符串) //转为 float类型

parseInt

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var age1 = prompt("请输入小明的年龄:"); // 12
			var age2 = prompt("请输入小刚的年龄:"); // 13
			
			//小明十年后 转int
			age1 = parseInt(age1);
			age1 += 10;
			
			//小刚十年后 不转 int
			age2 += 10;
			
			
			document.write("十年后小明的年龄:" + age1 + "</br>"); //22
			document.write("十年后小刚的年龄:" + age2); // 1310
			
		</script>
		<title></title>
	</head>
	<body>
		
		
	</body>
</html>

效果截图:

JavaScript字符串转数字的简单实现方法

很明显我们可以看出,如果不转int我们+10的时候就会得到拼接字符串的效果。

parseFloat

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			var num1 = prompt("请输入第一个数字(小数):"); // 11.22
			var num2 = prompt("请输入第二个数字(小数):"); // 22.33
			
			var num11=num1;
			var num22=num2;
			
			num1 = parseFloat(num1);
			num2 = parseFloat(num2);
			
			var sum = num1+num2; // 33.55
			
			var sum2 = num11 + num22; //11.2222.33
			
			document.write("相加的结果(转float):"+sum + "</br>");
			document.write("相加的结果(不转float):"+sum2);
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

效果截图:

JavaScript字符串转数字的简单实现方法

同样我们可以看出,如果不转float我们就会得到拼接字符串的效果。

总结

到此这篇关于JavaScript字符串转数字的简单实现方法的文章就介绍到这了,更多相关JavaScript字符串转数字内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
AngularJS 中的数据源的循环输出
Oct 12 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
JavaScript中的Proxy对象
Nov 27 #Javascript
详解JavaScript中的链式调用
Nov 27 #Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
JavaScript用document.write()输出换行的示例代码
Nov 26 #Javascript
You might like
多重?l件?合查?(二)
2006/10/09 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
php析构函数的具体用法小结
2014/03/11 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
SQL面试题
2013/04/30 面试题
男方父母证婚词
2014/01/12 职场文书
写给父母的感谢信
2015/01/22 职场文书
关于学习的决心书
2015/02/05 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL