谷歌地图距离计算后费用计算返回$NaN：如何用parseFloat清理变量值

这个问题我之前也碰到过——谷歌地图API返回的距离文本带了千位分隔符和单位，直接用来计算肯定会出NaN，核心就是要把字符串里的干扰字符清掉，转成纯数值再用。

下面是具体的解决步骤和代码实现：

核心思路 #

我们需要把类似"1,234.5 miles"的字符串，转换成可以参与计算的纯数字，再格式化为00.00的字符串用于输入框显示。

代码实现 #

// 从谷歌API获取原始距离文本
const rawDistance = response.routes[0].legs[0].distance.text;

// 1. 清理字符串：去掉单位、千位逗号，只保留数字和小数点
const cleanedStr = rawDistance
  .replace(/[^0-9.]/g, '') // 移除所有非数字/小数点的字符（比如" miles"）
  .replace(',', ''); // 移除千位分隔的逗号，避免parseFloat解析错误

// 2. 转换为浮点数，用于后续费用计算
const distanceValue = parseFloat(cleanedStr);

// 3. 格式化为00.00的字符串，赋值到输入框
const formattedDistance = distanceValue.toFixed(2);
document.getElementById("distance_road").value = formattedDistance;

// 现在用distanceValue计算费用就不会出现NaN了
const travelCost = distanceValue * 0.6; // 示例：每英里0.6美元
console.log(`总费用：$${travelCost.toFixed(2)}`);

关键步骤解释 #

• 正则清理：/[^0-9.]/g是一个全局正则，匹配所有不是数字和小数点的字符，一次性把" miles"这类后缀去掉，比单独替换更灵活（比如如果谷歌返回的是"km"也能处理）。
• 移除千位逗号：英文数字里的逗号是千位分隔符，比如"1,000 miles"如果不处理逗号，parseFloat只会解析到1，导致数值错误，所以必须去掉。
• toFixed(2)：确保输出的字符串是两位小数的格式，完全符合费用字段要求的00.00格式。

边界情况处理 #

• 如果谷歌返回的是整数距离（比如"5 miles"），处理后会变成"5.00"，依然符合输入框格式。
• 如果返回的是带多位小数的距离（比如"12.345 miles"），toFixed(2)会自动四舍五入为"12.35"，满足精度要求。

内容的提问来源于stack exchange，提问作者Invincible Inv