JavaScript 字符串转数值(小数)

在 JavaScript 中,将字符串转换为数值(包括小数)有多种方法。以下是常用的几种方式:

1. parseFloat() - 最常用的方法

javascript 复制代码
let str = "123.45";
let num = parseFloat(str); // 123.45 (number类型)
console.log(typeof num); // "number"

2. Number() 构造函数

javascript 复制代码
let str = "123.45";
let num = Number(str); // 123.45 (number类型)
console.log(typeof num); // "number"

3. 一元加号运算符(+)

javascript 复制代码
let str = "123.45";
let num = +str; // 123.45 (number类型)
console.log(typeof num); // "number"

4. parseFloat() 与 toFixed() 结合使用

javascript 复制代码
let str = "123.45678";
let num = parseFloat(str).toFixed(2); // "123.46" (string类型)
let num2 = parseFloat(parseFloat(str).toFixed(2)); // 123.46 (number类型)

实际应用示例

javascript 复制代码
// 从输入框获取值并转换为数值
let inputValue = document.getElementById("priceInput").value; // 假设值为 "123.45"
let price = parseFloat(inputValue); // 转换为数值 123.45

// 计算时使用数值
let total = price * 1.05; // 正确的数值计算

// 显示时格式化
document.getElementById("display").textContent = total.toFixed(2); // "129.62"

注意事项

  1. 无效值处理 :如果字符串不能转换为有效数字,会返回 NaN

    javascript 复制代码
    let invalid = parseFloat("abc"); // NaN
  2. 空字符串处理:空字符串会转换为 0

    javascript 复制代码
    let empty = parseFloat(""); // 0
  3. 部分数字字符串:parseFloat 会解析直到遇到非数字字符

    javascript 复制代码
    let partial = parseFloat("123.45abc"); // 123.45
  4. toFixed() 返回字符串:注意 toFixed() 返回的是字符串,不是数值

    javascript 复制代码
    let num = 123.456;
    let str = num.toFixed(2); // "123.46" (字符串)
    let num2 = parseFloat(num.toFixed(2)); // 123.46 (数值)

在您的代码中的应用

根据您提供的代码,您已经在多处使用了 toFixed(2) 来格式化显示数值,这是正确的做法。如果您需要将用户输入的字符串转换为数值进行计算,可以使用上述方法。

例如,在您的搜索功能中:

javascript 复制代码
function stock_search(btn) {
    let inputValue = document.getElementById("stock_search_input").value;
    // 如果需要确保是数值,可以转换
    let stockCode = parseInt(inputValue); // 如果是整数股票代码
    // 或者保持为字符串,取决于您的后端API要求
    
    // 然后使用 stockCode 进行搜索
    // ...
}

希望这些信息对您有帮助!

相关推荐
gugucoding8 小时前
47. 【Java】Java内存模型(JMM)与可见性
java·开发语言
m0_380743878 小时前
从零调用 Claude 教程
开发语言·python·node.js
起床学FPGA9 小时前
AI回答问题之后,会自动跳到最下面的问题
开发语言·javascript·ecmascript
x_x-F10 小时前
网络数据从网卡到用户态:一场基于内存所有权转移的接力赛
开发语言·网络·php
名字还没想好☜10 小时前
Java 线上内存泄漏排查实战:jmap 导堆、MAT 找 GC Roots 与四类常见泄漏
java·开发语言·jvm·内存泄漏
码匠许师傅10 小时前
【C++ 面试真题】聊聊 C++ 的多继承与虚继承
开发语言·c++·面试
我不是疯子是傻子11 小时前
Qt CAN通信周期发送抖动?实测定时器精度校准与时间戳补偿方案
开发语言·数据库·qt
IT爱学堂12 小时前
尚硅谷 - 2025年3月Java+AI大模型应用开发
java·开发语言·人工智能
有点。12 小时前
C++认识数
开发语言·c++
默_笙12 小时前
❗ 点击计数按钮,为什么"峨眉队"也跟着重新渲染?React.memo 说:我记住了
前端·javascript