JS数字转字符串6种方法及性能测试对比

前言

在JavaScript开发中，数字类型转换为字符串是高频操作。本文旨在梳理并介绍几种主流的实现路径，借助实际性能测试数据对比其执行效率。我们将逐一剖析每种方法的工作机制、适用环境，并归纳其优缺点，为技术选型提供依据。

常见方式

String() 函数：
```
let num = 42;
let str = String(num);
```
原理： String() 是JavaScript内置的全局函数，负责将传入的值强制转换为字符串类型。当输入为数字时，它直接返回该数字对应的字符串形式。

使用场景：适用于绝大多数通用的数字转字符串需求。该方法语法简洁、逻辑直观，是基础且可靠的转换手段。
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() 构造函数显式创建一个String对象实例，将数字作为参数传入，从而生成一个包装对象。

使用场景：通常不推荐在常规业务中使用，因为它生成的是对象而非基本字符串类型，占用更多内存。仅在需要区分基本类型与对象类型的特殊场景下可能用到。
toFixed() 方法：
```
let num = 42.567;
let str = num.toFixed(2); // "42.57"
```
原理： toFixed() 是Number对象的方法，用于将数字转换为字符串，并允许指定小数点后的保留位数。

使用场景：适用于需要严格控制小数点后位数的场景，例如金融计算、货币显示等对精度有特定要求的业务。

性能测试及总结

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

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数字转字符串内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript数字转字符串的6种方式与性能深度解析

前言

常见方式

性能测试及总结

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

测试代码

总结

实用工具推荐