前言

在JavaScript中，將數(shù)字轉(zhuǎn)換為字符串是一項(xiàng)常見的操作。本文將介紹幾種常用的數(shù)字轉(zhuǎn)字符串的方式，并通過性能測(cè)試比較它們的效率。我們將深入探討每種方法的原理、使用場(chǎng)景，并總結(jié)它們的優(yōu)劣。

常見方式

• String() 函數(shù)：

  let num = 42;
  let str = String(num);
  

  原理： String() 函數(shù)是將給定的值轉(zhuǎn)換為字符串的內(nèi)建函數(shù)。對(duì)于數(shù)字，它會(huì)將其轉(zhuǎn)換為相應(yīng)的字符串表示。

  使用場(chǎng)景： 適用于通用的數(shù)字轉(zhuǎn)字符串需求。是一種簡(jiǎn)單而直觀的方法。

• toString() 方法：

  let num = 42;
  let str = num.toString();
  

  原理： toString() 方法是基本數(shù)據(jù)類型的方法之一，用于將數(shù)字轉(zhuǎn)換為字符串。

  使用場(chǎng)景： 通常與數(shù)字對(duì)象一起使用，適用于數(shù)字對(duì)象的場(chǎng)景。

• 模板字符串（Template String）：

  let num = 42;
  let str = `${num}`;
  

  原理： 使用模板字符串是一種簡(jiǎn)潔的方式，它在字符串中嵌入了變量，這里的變量是數(shù)字。

  使用場(chǎng)景： 適用于需要在字符串中嵌入變量的情況，同時(shí)進(jìn)行數(shù)字轉(zhuǎn)字符串。

• String Concatenation（字符串拼接）：

  let num = 42;
  let str = '' + num;
  

  原理： 在JavaScript中，使用 + 運(yùn)算符進(jìn)行字符串拼接時(shí)，會(huì)將數(shù)字隱式轉(zhuǎn)換為字符串。

  使用場(chǎng)景： 適用于快速、簡(jiǎn)便的數(shù)字轉(zhuǎn)字符串需求。

• new String() 構(gòu)造函數(shù)

  new String(num)
  

  原理： 使用 new String() 構(gòu)造函數(shù)創(chuàng)建一個(gè)字符串對(duì)象，將數(shù)字作為參數(shù)傳入。

  使用場(chǎng)景： 通常不推薦使用，因?yàn)樗鼊?chuàng)建了一個(gè)字符串對(duì)象而非基本字符串類型。在一些特殊情況下可能有用。

• toFixed() 方法：

  let num = 42.567;
  let str = num.toFixed(2); // "42.57"
  

  原理： toFixed() 方法是數(shù)字對(duì)象的方法，用于將數(shù)字轉(zhuǎn)換為字符串，并指定小數(shù)點(diǎn)后的位數(shù)。

  使用場(chǎng)景： 適用于需要控制小數(shù)點(diǎn)后位數(shù)的情況，比如處理貨幣等。

性能測(cè)試及總結(jié)

我們通過執(zhí)行一百萬次的循環(huán)測(cè)試這六種方法的性能，得到以下結(jié)果：

• String(): 6.08 ms
• toString(): 5.54 ms
• 模板字符串（Template String）: 3.18 ms
• toFixed(): 118.79 ms
• 使用 + 運(yùn)算符: 5.79 ms
• new String(): 12.04 ms

從性能測(cè)試結(jié)果可以看出，模板字符串是最快的，其次是 String() 、使用 + 運(yùn)算符和 toString() 方法性能相近。new String() 構(gòu)造函數(shù)的性能相對(duì)較差，不建議在普通場(chǎng)景中使用。toFixed() 方法的性能最差差，主要因?yàn)樗M(jìn)行了復(fù)雜的小數(shù)位控制，適用于特定的場(chǎng)景，比如需要處理貨幣。

總體來說，根據(jù)具體場(chǎng)景選擇合適的方法是至關(guān)重要的。如果簡(jiǎn)單直觀、性能足夠好，可以選擇 String() 函數(shù)或使用 + 運(yùn)算符。如果需要在字符串中嵌入變量，模板字符串是一個(gè)不錯(cuò)的選擇。new String() 構(gòu)造函數(shù)在通常情況下并不是首選，性能較差。

綜上所述，合理選擇數(shù)字轉(zhuǎn)字符串的方法可以在代碼性能和可讀性之間取得平衡。在實(shí)際開發(fā)中，建議根據(jù)具體需求靈活選擇適合的方法。

為什么String、toString()、+運(yùn)算符時(shí)間近似？

JavaScript中使用String()、使用 + 運(yùn)算符和toString()方法將值轉(zhuǎn)換為字符串的性能相近，是因?yàn)檫@三種方法都會(huì)調(diào)用對(duì)象的內(nèi)部方法@@toPrimitive來獲取原始值，然后再將原始值轉(zhuǎn)換為字符串。

@@toPrimitive是一個(gè)符號(hào)屬性，它是一個(gè)函數(shù)，接受一個(gè)字符串參數(shù)，表示轉(zhuǎn)換的期望類型（“number"或"string”），并返回一個(gè)原始值。²³

如果對(duì)象有自定義的@@toPrimitive方法，那么它會(huì)根據(jù)期望類型返回相應(yīng)的原始值。如果對(duì)象沒有自定義的@@toPrimitive方法，那么默認(rèn)的轉(zhuǎn)換規(guī)則如下：

• 如果期望類型是"number"，那么先調(diào)用valueOf()方法，如果返回的是原始值，就返回這個(gè)值，否則再調(diào)用toString()方法，如果返回的是原始值，就返回這個(gè)值，否則拋出類型錯(cuò)誤異常。
• 如果期望類型是"string"，那么先調(diào)用toString()方法，如果返回的是原始值，就返回這個(gè)值，否則再調(diào)用valueOf()方法，如果返回的是原始值，就返回這個(gè)值，否則拋出類型錯(cuò)誤異常。

因此，使用String()、使用 + 運(yùn)算符和toString()方法都會(huì)觸發(fā)對(duì)象的@@toPrimitive方法，只是期望類型不同。String()和toString()都期望得到"string"類型的原始值，而 + 運(yùn)算符則根據(jù)操作數(shù)的類型來確定期望類型。如果其中一個(gè)操作數(shù)是字符串，那么期望類型是"string"，否則是"number"。

由于這三種方法都會(huì)調(diào)用相同的內(nèi)部方法，所以它們的性能相近。當(dāng)然，具體的性能還取決于瀏覽器的實(shí)現(xiàn)和優(yōu)化，以及對(duì)象的類型和結(jié)構(gòu)。一般來說，使用 + 運(yùn)算符可能會(huì)稍微快一點(diǎn)，因?yàn)樗恍枰獎(jiǎng)?chuàng)建一個(gè)新的函數(shù)對(duì)象，而是直接使用內(nèi)置的運(yùn)算符函數(shù)。

測(cè)試代碼

const num = 123456789
const times = 100000

console.time("String")
for (let i = 0; i < times; i++) {
	String(num)
}
console.timeEnd("String")

console.time("toString")
for (let i = 0; i < times; i++) {
	num.toString()
}
console.timeEnd("toString")

console.time("template string")
for (let i = 0; i < times; i++) {
	`${num}`
}
console.timeEnd("template string")

console.time("toFixed")
for (let i = 0; i < times; i++) {
	num.toFixed(2)
}
console.timeEnd("toFixed")

console.time('use +""')
for (let i = 0; i < times; i++) {
	num + ""
}
console.timeEnd('use +""')

console.time("new String")
for (let i = 0; i < times; i++) {
	new String(num)
}
console.timeEnd("new String")

總結(jié) 

到此這篇關(guān)于JavaScript中數(shù)字轉(zhuǎn)字符串的6種方式以及性能比較的文章就介紹到這了,更多相關(guān)JS數(shù)字轉(zhuǎn)字符串內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論