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 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
jQuery侧边栏实现代码
May 06 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
使用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
开发大型PHP项目的方法
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
javascript学习之json入门
2016/12/22 Javascript
原生js二级联动效果
2017/06/20 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Python实现简单文本字符串处理的方法
2018/01/22 Python
python 读入多行数据的实例
2018/04/19 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
矫正人员思想汇报
2014/01/08 职场文书
销售业务员岗位职责
2014/01/29 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
教师师德演讲稿
2014/05/06 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
公司车队管理制度
2015/08/04 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python