JavaScript中parseFloat()函数的使用示例

更新时间：2025年08月07日 10:25:47 作者：Gloria-!

parseFloat主要将首位是数字的字符串转换成浮点型数字,如果字符串不是以数字开头,就会返回NaN,这篇文章主要给大家介绍了关于JavaScript中parseFloat()函数的使用示例,需要的朋友可以参考下

一、基本语法

parseFloat() 是 JavaScript 中用于将字符串解析为浮点数（十进制小数）的函数。

它会从字符串的开头提取数字部分，直到遇到无法解析为数字的字符为止。

以下是详细用法和注意事项：

parseFloat(string)

参数：string（要解析的字符串，非字符串类型会自动转换为字符串）。
返回值：成功解析–>返回对应的浮点数，失败解析–>返回 NaN（非数值）。

二、使用示例

基本解析

console.log(parseFloat("3.14"));     // 3.14
console.log(parseFloat("-12.5"));    // -12.5
console.log(parseFloat("12.3e5"));   // 1230000（科学计数法）

忽略非数字字符

console.log(parseFloat("123.45px")); // 123.45（提取到第一个非数字前）
console.log(parseFloat("abc123"));   // NaN（开头无有效数字）
console.log(parseFloat("  4.5  "));  // 4.5（忽略前后空格）

处理特殊值

console.log(parseFloat("Infinity")); // Infinity（特殊值）
console.log(parseFloat("NaN"));      // NaN（无法解析为数值）
console.log(parseFloat("Infinity"));  // Infinity
console.log(parseFloat("-Infinity")); // -Infinity
console.log(parseFloat("NaN"));       // NaN
console.log(parseFloat("0x10"));      // 16（十六进制）
console.log(parseFloat("0b10"));      // 2（不支持，返回 NaN）
console.log(parseFloat("0o10"));      // 8（八进制）
console.log(parseFloat("0.1e2"));     // 10（科学计数法）
console.log(parseFloat("0.1e-2"));    // 0.001（科学计数法）
console.log(parseFloat("0.1e+2"));    // 10（科学计数法）
console.log(parseFloat("0.1e+2.3"));  // 10（忽略后面的部分）
console.log(parseFloat("0.1e+2abc")); // 10（忽略后面的部分）
console.log(parseFloat("0.1e+2.3abc")); // 10（忽略后面的部分）
console.log(parseFloat("0.1e+2abc")); // 10（忽略后面的部分）
console.log(parseFloat("0.1e+2  .3abc")); // 10（忽略后面的部分）

非字符串参数

        console.log(parseFloat(123));        // 123（数字 → 字符串）   
        console.log(parseFloat(true));       // NaN（true → "true"）
        console.log(parseFloat(null));       // NaN（null → "null"）
        console.log(parseFloat([]));         // 0（空数组 → "" → 0？）
// 注意：空数组会被转换为空字符串，parseFloat("") 返回 NaN，但某些浏览器可能返回 0。

三、注意事项

与 parseInt() 的区别
函数解析目标进制处理示例
parseFloat() 浮点数仅十进制 parseFloat(“0xA”) → 0
parseInt() 整数可指定进制（默认十进制） parseInt(“0xA”, 16) → 10
与 Number() 的区别

Number() 会严格转换整个字符串：

console.log(Number("123.45px")); // NaN
console.log(parseFloat("123.45px")); // 123.45

科学计数法支持

console.log(parseFloat("1.2e3"));  // 1200
console.log(parseFloat("1E-3"));    // 0.001

前导零与进制问题
parseFloat() 不解析八进制或十六进制：

console.log(parseFloat("0xA"));   // 0（仅解析到第一个非数字字符）
console.log(parseFloat("0123"));  // 123（前导零被忽略）

四、实际应用场景

提取带单位的数值

const width = "200.5px";
const numericValue = parseFloat(width); // 200.5

处理用户输入

const userInput = prompt("请输入价格：");
const price = parseFloat(userInput);
if (!isNaN(price)) {
  console.log(`价格是：${price}`);
} else {
  console.log("输入无效！");
}

安全转换数值

// 避免直接转换潜在的非数字字符串
function safeParse(str) {
  const num = parseFloat(str);
  return isNaN(num) ? 0 : num;
}
console.log(safeParse("abc")); // 0

五、总结

用途：从字符串中提取浮点数，适合处理混合字符的数值（如 “100px”）。
特点：自动忽略前导空格，支持科学计数法，不识别进制前缀。
陷阱：无法解析非数字开头字符串时返回 NaN，需结合 isNaN() 验证结果。
替代方案：需要严格解析时，可用正则表达式或 Number() 转换。

到此这篇关于JavaScript中parseFloat()函数使用的文章就介绍到这了,更多相关JS parseFloat()函数使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

raphael.js绘制中国地图地图绘制方法
在本文中给大家分享如何使用raphael.js来完成地图交互,raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能,需要的朋友可以参考下
2014-02-02
ajax请求get与post的区别总结
本篇文章是对ajax请求get与post的区别进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JS数组去掉重复数据只保留一条的实现代码
这篇文章主要介绍了JS数组去掉重复数据只保留一条的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
js 调用父窗口的具体实现代码
想要实现如题所示:父窗体需要顶一个show()方法，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
javaScript封装的各种写法
这篇文章主要介绍了javaScript封装的各种写法,通过列举优缺点和使用场景详细介绍了几种封装的格式,需要的朋友可以参考下
2017-08-08
javascript+css 网页每次加载不同样式的实现方法
用户每次访问时随机载入样式，让微博在视觉上保持新鲜感。虽然思路与实现都比较简单，但还是想记录下来，与大家分享。
2009-12-12
JavaScript面向对象编程
暂时放弃js框架吧开始写javascript的时候都是自己写，后来发现了prototype.js框架，发现很好用，就一直用的，他的对象创建方法被修改了，但很好用，再后来又转用jquery框架，受此框架影响，也不用自己创建类了，渐渐的竟然忘记了如何自己定义类了，猛的给一个一般方法，竟然看着别扭，混淆了很多东西，忘记了很多东西。今天回头整理下。一下方法参考prototype.js
2008-03-03
javascript实现复选框全选或反选
这篇文章主要为大家详细介绍了javascript实现复选框全选或反选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
Java设计中的Builder模式的介绍
这篇文章主要介绍了从一个Person例子进行分析重叠构造器模式、Builder模式的使用场景以及运用JavaBeans模式弥补重叠构造器模式的不足
2018-03-03
canvas学习之API整理笔记（二）
本篇文章的主要内容包括高级动画、像素操作、性能优化等知识点，讲解每个知识点的同时还会有一些酷炫的demo。下面跟着小编一起来看下吧
2016-12-12