JavaScript中数字转字符串的6种方式以及性能比较

前言

在JavaScript中，将数字转换为字符串是一项常见的操作。本文将介绍几种常用的数字转字符串的方式，并通过性能测试比较它们的效率。我们将深入探讨每种方法的原理、使用场景，并总结它们的优劣。

常见方式

• String() 函数：

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

  原理： String() 函数是将给定的值转换为字符串的内建函数。对于数字，它会将其转换为相应的字符串表示。

  使用场景： 适用于通用的数字转字符串需求。是一种简单而直观的方法。

• toString() 方法：

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

  原理： toString() 方法是基本数据类型的方法之一，用于将数字转换为字符串。

  使用场景： 通常与数字对象一起使用，适用于数字对象的场景。

• 模板字符串（Template String）：

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

  原理： 使用模板字符串是一种简洁的方式，它在字符串中嵌入了变量，这里的变量是数字。

  使用场景： 适用于需要在字符串中嵌入变量的情况，同时进行数字转字符串。

• String Concatenation（字符串拼接）：

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

  原理： 在JavaScript中，使用 + 运算符进行字符串拼接时，会将数字隐式转换为字符串。

  使用场景： 适用于快速、简便的数字转字符串需求。

• new String() 构造函数

  new String(num)
  

  原理： 使用 new String() 构造函数创建一个字符串对象，将数字作为参数传入。

  使用场景： 通常不推荐使用，因为它创建了一个字符串对象而非基本字符串类型。在一些特殊情况下可能有用。

• toFixed() 方法：

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

  原理： toFixed() 方法是数字对象的方法，用于将数字转换为字符串，并指定小数点后的位数。

  使用场景： 适用于需要控制小数点后位数的情况，比如处理货币等。

性能测试及总结

我们通过执行一百万次的循环测试这六种方法的性能，得到以下结果：

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

从性能测试结果可以看出，模板字符串是最快的，其次是 String() 、使用 + 运算符和 toString() 方法性能相近。new String() 构造函数的性能相对较差，不建议在普通场景中使用。toFixed() 方法的性能最差差，主要因为它进行了复杂的小数位控制，适用于特定的场景，比如需要处理货币。

总体来说，根据具体场景选择合适的方法是至关重要的。如果简单直观、性能足够好，可以选择 String() 函数或使用 + 运算符。如果需要在字符串中嵌入变量，模板字符串是一个不错的选择。new String() 构造函数在通常情况下并不是首选，性能较差。

综上所述，合理选择数字转字符串的方法可以在代码性能和可读性之间取得平衡。在实际开发中，建议根据具体需求灵活选择适合的方法。

为什么String、toString()、+运算符时间近似？

JavaScript中使用String()、使用 + 运算符和toString()方法将值转换为字符串的性能相近，是因为这三种方法都会调用对象的内部方法@@toPrimitive来获取原始值，然后再将原始值转换为字符串。

@@toPrimitive是一个符号属性，它是一个函数，接受一个字符串参数，表示转换的期望类型（“number"或"string”），并返回一个原始值。²³

如果对象有自定义的@@toPrimitive方法，那么它会根据期望类型返回相应的原始值。如果对象没有自定义的@@toPrimitive方法，那么默认的转换规则如下：

• 如果期望类型是"number"，那么先调用valueOf()方法，如果返回的是原始值，就返回这个值，否则再调用toString()方法，如果返回的是原始值，就返回这个值，否则抛出类型错误异常。
• 如果期望类型是"string"，那么先调用toString()方法，如果返回的是原始值，就返回这个值，否则再调用valueOf()方法，如果返回的是原始值，就返回这个值，否则抛出类型错误异常。

因此，使用String()、使用 + 运算符和toString()方法都会触发对象的@@toPrimitive方法，只是期望类型不同。String()和toString()都期望得到"string"类型的原始值，而 + 运算符则根据操作数的类型来确定期望类型。如果其中一个操作数是字符串，那么期望类型是"string"，否则是"number"。

由于这三种方法都会调用相同的内部方法，所以它们的性能相近。当然，具体的性能还取决于浏览器的实现和优化，以及对象的类型和结构。一般来说，使用 + 运算符可能会稍微快一点，因为它不需要创建一个新的函数对象，而是直接使用内置的运算符函数。

测试代码

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")

总结 

到此这篇关于JavaScript中数字转字符串的6种方式以及性能比较的文章就介绍到这了,更多相关JS数字转字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！