JavaScript中parseFloat()函數(shù)的使用示例

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

parseFloat主要將首位是數(shù)字的字符串轉(zhuǎn)換成浮點型數(shù)字,如果字符串不是以數(shù)字開頭,就會返回NaN,這篇文章主要給大家介紹了關(guān)于JavaScript中parseFloat()函數(shù)的使用示例,需要的朋友可以參考下

一、基本語法

parseFloat() 是 JavaScript 中用于將字符串解析為浮點數(shù)（十進制小數(shù)）的函數(shù)。

它會從字符串的開頭提取數(shù)字部分，直到遇到無法解析為數(shù)字的字符為止。

以下是詳細用法和注意事項：

parseFloat(string)

參數(shù)：string（要解析的字符串，非字符串類型會自動轉(zhuǎn)換為字符串）。
返回值：成功解析–>返回對應的浮點數(shù)，失敗解析–>返回 NaN（非數(shù)值）。

二、使用示例

基本解析

console.log(parseFloat("3.14"));     // 3.14
console.log(parseFloat("-12.5"));    // -12.5
console.log(parseFloat("12.3e5"));   // 1230000（科學計數(shù)法）

忽略非數(shù)字字符

console.log(parseFloat("123.45px")); // 123.45（提取到第一個非數(shù)字前）
console.log(parseFloat("abc123"));   // NaN（開頭無有效數(shù)字）
console.log(parseFloat("  4.5  "));  // 4.5（忽略前后空格）

處理特殊值

console.log(parseFloat("Infinity")); // Infinity（特殊值）
console.log(parseFloat("NaN"));      // NaN（無法解析為數(shù)值）
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（科學計數(shù)法）
console.log(parseFloat("0.1e-2"));    // 0.001（科學計數(shù)法）
console.log(parseFloat("0.1e+2"));    // 10（科學計數(shù)法）
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（忽略后面的部分）

非字符串參數(shù)

        console.log(parseFloat(123));        // 123（數(shù)字 → 字符串）   
        console.log(parseFloat(true));       // NaN（true → "true"）
        console.log(parseFloat(null));       // NaN（null → "null"）
        console.log(parseFloat([]));         // 0（空數(shù)組 → "" → 0？）
// 注意：空數(shù)組會被轉(zhuǎn)換為空字符串，parseFloat("") 返回 NaN，但某些瀏覽器可能返回 0。

三、注意事項

與 parseInt() 的區(qū)別
函數(shù) 解析目標進制處理示例
parseFloat() 浮點數(shù) 僅十進制 parseFloat(“0xA”) → 0
parseInt() 整數(shù) 可指定進制（默認十進制） parseInt(“0xA”, 16) → 10
與 Number() 的區(qū)別

Number() 會嚴格轉(zhuǎn)換整個字符串：

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

科學計數(shù)法支持

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

前導零與進制問題
parseFloat() 不解析八進制或十六進制：

console.log(parseFloat("0xA"));   // 0（僅解析到第一個非數(shù)字字符）
console.log(parseFloat("0123"));  // 123（前導零被忽略）

四、實際應用場景

提取帶單位的數(shù)值

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("輸入無效！");
}

安全轉(zhuǎn)換數(shù)值

// 避免直接轉(zhuǎn)換潛在的非數(shù)字字符串
function safeParse(str) {
  const num = parseFloat(str);
  return isNaN(num) ? 0 : num;
}
console.log(safeParse("abc")); // 0