Javascript 将数组连接到字符串

Javascript Concatenate Array to String

本文关键字：字符串 连接 数组 Javascript      更新时间：2023-09-26

我正在使用D3.js并且经常发现自己动态构建transform属性(或path元素上的d属性(。 这两者都通常需要多个逗号分隔的数字。

有时我通过将数组连接到字符串来构建字符串：

var x = 0,
y = 1,
path = 'M0,0 L' + [x, y];

有时我通过手动添加逗号来构建字符串：

var x = 0,
y = 1,
path = 'M0,0 L' + x + ',' + y;

我决定我应该尝试坚持一种方法或另一种方法，并且想知道哪种方法更好。

以下是我考虑过的几件事：

  • 我知道调用join()比手动连接逗号慢，但这是浏览器将数组连接到字符串时所做的吗？
  • 第二种格式可以在任何浏览器中使用。 是否有任何浏览器不支持第一种格式？
  • 第一种格式使用较少的字符(保持较小的文件大小始终是一个加号(。
  • 就个人而言，我认为第一种格式更具可读性。

有没有一种方法绝对比另一种更好？ 还是我只是吹毛求疵？

当 JavaScript 将数组强制转换为字符串时，它实际上在数组上调用： .join(',')。因此，您实际上可以通过手动.join(',')获得更好的性能，而不是让解释器来注意到您正在强制数组。所以：x + ',' + y是最快的，[x, y].join(',')是最佳实践(因为它可以更轻松地修改行为(，[x, y]比手动调用.join慢一点，有时可能无法读取，但它更方便。

简短的回答：使用array.join。

长答案：

首先，连接并不比使用 array.join(( 快，它更慢。 这是因为每次连接时都会销毁两个字符串并创建一个新字符串。

采用以下代码：

<script>
function concat(){
var txt = '';
for (var i = 0; i < 1000000; i++){
txt =+ i + ',';
}
}
function arr(ar){
var txt = 'asdf' + ar;
}
ar = [];
for (var i = 0; i < 1000000; i++) {
ar.push(i);
}
concat();
arr(ar);
alert('done!');
</script>

并将其粘贴到 HTML 文件中。然后对其进行分析。在我的机器上(Core i7EE，16GB RAM，SSD磁盘，IE9(，arr((需要0ms，concat((需要12ms。请记住，这是超过一百万次迭代(同样的测试在IE6上会有很大的不同，concat((需要几秒钟(。

其次，当只有两个值时，串联将采用与 array.join 相同的方法。因此，对于您的示例，从性能的角度来看，它们都是等效的。如果您采用上述代码并将 1000000 更改为 4，则 Concat 和 ARR 都需要 0ms 才能执行。这意味着您的特定流的差异要么不存在，要么可以忽略不计，它不会显示在配置文件中。

第三，现代浏览器无论如何都使用 array.join(( 优化字符串连接，因此从性能的角度来看，讨论可能没有实际意义。

这给我们留下了风格。就个人而言，我不会使用第一种形式，因为我不喜欢手动连接字符串(当你有 2 个变量时，它相当简单，但是如果你有 10 个变量怎么办？ 这将形成一行很长的代码。如果你收到一个有 n 个值的数组怎么办，就会出现一个 for 循环(。我也不会使用第二种形式，因为正如另一个答案所指出的，值被强制为字符串，这意味着正在进行一些隐式转换。这里的问题是隐含的部分。我知道现在数组在强制时用逗号连接，但是如果规范发生变化，或者某个天才决定在您的代码库中更改 Array.prototype 的 toString 实现会发生什么？只是为了好玩，在 JSFIDDLE 中运行这个：

Array.prototype.toString = function() {
return 'not the expected result!';
}
alert([1, 2]);

你能猜出答案会是什么吗？(上面的代码将为数组执行与您的代码相同的转换。

如果你使用 array.join('，'(; 你将通过声明 1( 无论 toString 实现如何，你的数组都将被连接，2( 它将用逗号连接，从而证明你的代码是未来的。

相关文章：