快捷導(dǎo)航

JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)值的多種方法

更新時間：2026年05月06日 08:16:39 作者：detayun

在 JavaScript 中,將字符串轉(zhuǎn)換為數(shù)值（包括小數(shù)）有多種方法,主要包括parseFloat(),Number()和toFixed(),?下面小編就和大家詳細講講具體使用方法,希望對大家有所幫助

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

let str = "123.45";
let num = parseFloat(str); // 123.45 (number類型)
console.log(typeof num); // "number"

2. Number() 構(gòu)造函數(shù)

let str = "123.45";
let num = Number(str); // 123.45 (number類型)
console.log(typeof num); // "number"

3. 一元加號運算符（+）

let str = "123.45";
let num = +str; // 123.45 (number類型)
console.log(typeof num); // "number"

4. parseFloat() 與 toFixed() 結(jié)合使用

let str = "123.45678";
let num = parseFloat(str).toFixed(2); // "123.46" (string類型)
let num2 = parseFloat(parseFloat(str).toFixed(2)); // 123.46 (number類型)

實際應(yīng)用示例

// 從輸入框獲取值并轉(zhuǎn)換為數(shù)值
let inputValue = document.getElementById("priceInput").value; // 假設(shè)值為 "123.45"
let price = parseFloat(inputValue); // 轉(zhuǎn)換為數(shù)值 123.45

// 計算時使用數(shù)值
let total = price * 1.05; // 正確的數(shù)值計算

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

注意事項

無效值處理：如果字符串不能轉(zhuǎn)換為有效數(shù)字，會返回 NaN

let invalid = parseFloat("abc"); // NaN

空字符串處理：空字符串會轉(zhuǎn)換為 0

let empty = parseFloat(""); // 0

部分數(shù)字字符串：parseFloat 會解析直到遇到非數(shù)字字符

let partial = parseFloat("123.45abc"); // 123.45

toFixed() 返回字符串：注意 toFixed() 返回的是字符串，不是數(shù)值

let num = 123.456;
let str = num.toFixed(2); // "123.46" (字符串)
let num2 = parseFloat(num.toFixed(2)); // 123.46 (數(shù)值)

在您的代碼中的應(yīng)用

根據(jù)您提供的代碼，您已經(jīng)在多處使用了 toFixed(2) 來格式化顯示數(shù)值，這是正確的做法。如果您需要將用戶輸入的字符串轉(zhuǎn)換為數(shù)值進行計算，可以使用上述方法。

例如，在您的搜索功能中：

function stock_search(btn) {
    let inputValue = document.getElementById("stock_search_input").value;
    // 如果需要確保是數(shù)值，可以轉(zhuǎn)換
    let stockCode = parseInt(inputValue); // 如果是整數(shù)股票代碼
    // 或者保持為字符串，取決于您的后端API要求
    
    // 然后使用 stockCode 進行搜索
    // ...
}

知識擴展

在 JavaScript 中，將字符串轉(zhuǎn)換為數(shù)值有多種方法，不同方法在行為、適用場景和性能上有所差異。下面列出最常用的幾種方式，并給出對比和建議。

方法速覽

方法	示例	返回值類型	處理空字符串	處理非數(shù)字字符	適用場景
`Number(str)`	`Number("123")` → 123	number	0	`NaN`	嚴格轉(zhuǎn)換，要求整個字符串為數(shù)字
`+str`	`+"123"` → 123	number	0	`NaN`	與 `Number` 完全一致，寫法簡潔
`parseInt(str, radix)`	`parseInt("123px")` → 123	number	`NaN`	解析到第一個非數(shù)字字符停止	提取整數(shù)部分，忽略尾部非數(shù)字
`parseFloat(str)`	`parseFloat("12.34px")` → 12.34	number	`NaN`	解析到第一個非數(shù)字字符停止（小數(shù)點除外）	提取浮點數(shù)部分
`Math.floor/ceil` 等	需先轉(zhuǎn)為數(shù)字	-	-	-	取整運算，必須確保字符串已是數(shù)字

各方法詳解

1. Number(str) 構(gòu)造函數(shù)

Number("42");          // 42
Number("3.14");        // 3.14
Number("  99  ");      // 99（自動去除前后空格）
Number("");            // 0（空字符串轉(zhuǎn)為 0）
Number("abc");         // NaN
Number("12a");         // NaN（整個字符串不能包含非數(shù)字字符，空格除外）
Number("0x10");        // 16（支持十六進制）

特點：

嚴格：要求整個字符串（除前后空格）必須表示一個有效的數(shù)字。
空字符串 → 0，僅空白字符串 → 0。
支持十六進制（如 "0xFF" → 255）。

2. 一元加號運算符 +

+"42";               // 42
+"3.14";             // 3.14
+"  99  ";           // 99
+"";                 // 0
+"abc";              // NaN

特點：

行為與 Number() 完全相同，是更簡潔的寫法。
常用于快速轉(zhuǎn)換，性能也略優(yōu)于 Number()（差異可忽略）。

3. parseInt(string, radix)

parseInt("42");           // 42
parseInt("   100   ");    // 100
parseInt("12.34");        // 12（僅整數(shù)部分）
parseInt("12px");         // 12（解析到第一個非數(shù)字字符停止）
parseInt("abc");          // NaN
parseInt("1010", 2);      // 10（二進制解析）
parseInt("0xFF");         // 255（若未指定 radix，十六進制自動識別）

特點：

解析過程：從左向右掃描，直到遇到第一個非數(shù)字字符（小數(shù)點 '.' 也算非數(shù)字，因此只取整數(shù)部分）。
進制參數(shù) radix：強烈建議始終提供 radix（如 parseInt("10", 10)），避免因字符串以 "0x" 開頭導(dǎo)致意外解析為十六進制。
對于空字符串 → NaN（與 Number() 不同）。
忽略前后空格，但中間空格會導(dǎo)致停止。

4. parseFloat(str)

parseFloat("3.14");       // 3.14
parseFloat("3.14.15");    // 3.14（遇到第二個小數(shù)點停止）
parseFloat("12px");       // 12
parseFloat("  15.6  ");   // 15.6
parseFloat("abc");        // NaN
parseFloat("0x10");       // 0（parseFloat 不支持十六進制）

特點：

解析到第一個非數(shù)字字符（小數(shù)點除外）停止。
僅支持十進制，不支持十六進制。
空字符串 → NaN。

特殊情況與邊緣值

輸入	Number/+	parseInt	parseFloat	說明
" 123 "	123	123	123	前后空格被忽略
""	0	NaN	NaN	Number 將空字符串視為 0
" "	0	NaN	NaN	僅空格
null	0	NaN	NaN	Number(null) → 0
undefined	NaN	NaN	NaN
"12.34.56"	NaN	12	12.34	parseInt 在第一個 '.' 停止
"12abc34"	NaN	12	12	從開頭解析到第一個字母
"0x10"	16	16（需注意 radix）	0	parseFloat 不支持十六進制
true	1	NaN	NaN	布爾值先被 Number() 轉(zhuǎn)換

性能比較

在幾乎所有現(xiàn)代 JavaScript 引擎中，一元加號 + 和 Number() 性能非常接近，parseInt / parseFloat 稍慢（因為需要解析更復(fù)雜的字符串規(guī)則）。對于大量轉(zhuǎn)換，可優(yōu)先使用 + 或 Number()。

最佳實踐建議

常規(guī)數(shù)字轉(zhuǎn)換（字符串確定是數(shù)字格式）：使用 +str 或 Number(str)，簡潔且語義清晰。

從用戶輸入中提取整數(shù)（例如 "123px"）：使用 parseInt(str, 10)（必須帶 radix）。

提取浮點數(shù)（例如 "12.34px"）：使用 parseFloat(str)。

需要判斷轉(zhuǎn)換是否成功：

let num = +someString;
if (!isNaN(num) &amp;&amp; isFinite(num)) { // 有效數(shù)字
}

避免用 parseInt 代替 Number：parseInt("0x10") 在未指定 radix 時被解析為 16，但若意圖是十進制 0，就會得到錯誤結(jié)果。所以 始終為 parseInt 提供 radix。

完整示例

// 用戶輸入場景
let input = "  42.5px  ";
let num = parseFloat(input);    // 42.5
let integer = parseInt(input, 10); // 42
// 嚴格控制格式的場景
let priceStr = "19.99";
let price = +priceStr;          // 19.99
// 表單校驗
let ageStr = "25";
if (!/^\d+$/.test(ageStr)) {
    // 不是純數(shù)字字符串，需提示用戶
} else {
    let age = +ageStr;
}

選擇合適的方法取決于你的具體需求：是否需要容忍尾部非數(shù)字字符、是否需要處理十六進制、是否要保留小數(shù)部分等。通常情況下，+ 操作符是最直接、最常用的方式。

到此這篇關(guān)于JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)值的多種方法的文章就介紹到這了,更多相關(guān)JavaScript字符串轉(zhuǎn)數(shù)值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: