快捷導(dǎo)航

Vue中String() 和 .toString()的區(qū)別小結(jié)

更新時間：2026年02月13日 10:09:25 作者：半花

本文主要介紹了Vue中String()和.toString()的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

核心區(qū)別總覽

表格

特性	String() 全局函數(shù)	.toString() 方法
調(diào)用方式	函數(shù)調(diào)用（String(xxx)）	實例方法調(diào)用（xxx.toString()）
空值處理	可處理 null/undefined（不報錯）	處理 null/undefined 直接報錯
原始值處理	直接轉(zhuǎn)換原始值（如數(shù)字、布爾）	原始值會先裝箱為對象，再調(diào)用方法
返回結(jié)果	所有合法輸入都返回字符串	僅非空值能返回字符串，空值拋錯
適用場景	不確定值是否為 null/undefined 時	確定值為非空原始值 / 對象時

總結(jié)

核心差異：String() 能安全處理 null/undefined，.toString() 會拋錯；
結(jié)果一致場景：處理非空原始值（數(shù)字、布爾、字符串）時，兩者返回結(jié)果相同；
特殊能力：.toString() 支持?jǐn)?shù)字進(jìn)制轉(zhuǎn)換，String() 無此功能；
開發(fā)建議：
- 不確定值是否為空 → 用 String()；
- 確定值非空 + 需進(jìn)制轉(zhuǎn)換 → 用 .toString()；
- 處理對象 / 數(shù)組 → 兩者結(jié)果一致，任選即可。

具體用法&差異詳解

處理null/undefined（最核心區(qū)別）

這是兩者最關(guān)鍵的差異，也是實際開發(fā)中最容易踩坑的點：

// 1. String() 處理 null/undefined → 不報錯，返回對應(yīng)字符串 
console.log(String(null)); // "null" 
console.log(String(undefined)); // "undefined" 

// 2. .toString() 處理 null/undefined → 直接拋 TypeError 
console.log(null.toString()); // Uncaught TypeError: Cannot read properties of null (reading 'toString') 
console.log(undefined.toString());// Uncaught TypeError: Cannot read properties of undefined (reading 'toString')

處理原始值（數(shù)字、布爾、字符串）

兩者結(jié)果一致，但底層邏輯不同：

// 數(shù)字 
console.log(String(123)); // "123" 
console.log((123).toString()); // "123" 

// 布爾 
console.log(String(true)); // "true" 
console.log(true.toString()); // "true" 

// 空字符串 
console.log(String('')); // "" 
console.log(''.toString()); // "" 

// 特殊數(shù)字（NaN/Infinity） 
console.log(String(NaN)); // "NaN" 
console.log(NaN.toString()); // "NaN"

底層差異：String(123) 直接轉(zhuǎn)換原始數(shù)字；(123).toString() 會先把 123 裝箱為 Number 對象（new Number(123)），再調(diào)用對象的 toString() 方法。

處理對象（數(shù)組、普通對象）

String() 會調(diào)用對象的 toString() 方法（等同于 obj.toString()）；
普通對象的 toString() 默認(rèn)返回 "[object Object]"，數(shù)組的 toString() 會拼接元素：

// 數(shù)組 
const arr = [1, 2, 3];
console.log(String(arr)); // "1,2,3" 
console.log(arr.toString()); // "1,2,3" 

// 普通對象 
const obj = { a: 1 };
console.log(String(obj)); // "[object Object]" 
console.log(obj.toString()); // "[object Object]" 

// 自定義對象（重寫 toString） 
const customObj = { 
  toString() { 
    return "自定義字符串";
  } 
}; 
console.log(String(customObj)); // "自定義字符串" 
console.log(customObj.toString());// "自定義字符串"

處理空字符串 / 空值的邊界場景

// 空字符串 
console.log(String('')); // "" 
console.log(''.toString()); // "" 

// 0/空數(shù)組 
console.log(String(0)); // "0" 
console.log((0).toString()); // "0" 
console.log(String([])); // "" 
console.log([].toString()); // ""

實際開發(fā)中的選擇建議

優(yōu)先用String()

當(dāng)你不確定要轉(zhuǎn)換的值是否為 null/undefined 時（比如接口返回值、用戶輸入、變量可能未初始化），String() 更安全，不會報錯。

// 示例：處理接口返回的可能為空的值 
const res = { data: null }; 
const str = String(res.data); // "null"（不報錯）

用.toString()的場景

當(dāng)你明確知道值是非空的原始值 / 對象時（比如數(shù)字、數(shù)組），可以用 .toString()，語義更清晰。

// 示例：數(shù)字轉(zhuǎn)指定進(jìn)制字符串（toString 支持參數(shù)，String 不支持） 
console.log((10).toString(2)); // "1010"（轉(zhuǎn)二進(jìn)制） 
console.log((10).toString(16)); // "a"（轉(zhuǎn)十六進(jìn)制）

補(bǔ)充：Number.prototype.toString(radix) 支持傳入進(jìn)制參數(shù)（2-36），這是 String() 沒有的功能。

到此這篇關(guān)于Vue中String() 和 .toString()的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)Vue String() .toString()區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: