JavaScript代码执行顺序疑问：为何第一个示例中join()未生效？

安全阿岳

2026-5-21

为什么第一个函数里的join()没生效？

嘿，这个问题其实是JavaScript数组方法的一个常见小坑，咱们来理清楚：

核心原因：`Array.join()`不会修改原数组

join()方法的作用是返回一个新的字符串，它并不会改变你调用它的那个原数组。你第一个函数里的问题就出在这儿：

function dice(number) {
  let results = [];
  for (let i = 1; i <= number; i++) {
    results.push(Math.floor(Math.random() * (6 - 1)) + 1);
  }
  results.join(", "); // 这里调用了join，但没用到它的返回值！
  return `Rolled ${number} dice: ${results}`;
}

你只是调用了results.join(", ")，但既没把返回的字符串存进变量，也没直接放到模板字符串里。那你看到的5,2,1是哪儿来的？其实是模板字符串在遇到数组时，自动调用了数组的toString()方法——这个方法默认会用无空格的逗号把元素连起来，看起来和join()有点像，但这不是你手动调用join(", ")的效果（如果你想得到带空格的5, 2, 1，就会发现完全达不到预期）。

正确的用法（也就是你第二个函数的思路）

要让join()生效，你得使用它返回的字符串才行，两种写法都可以：

把结果存到变量里再用：

function dice(number) {
  let results = [];
  for (let i = 1; i <= number; i++) {
    results.push(Math.floor(Math.random() * 5) + 1);
  }
  const formattedResults = results.join(", "); // 保存join的返回值
  return `Rolled ${number} dice: ${formattedResults}`;
}

直接把join()调用嵌入到模板字符串中：

function dice(number) {
  let results = [];
  for (let i = 1; i <= number; i++) {
    results.push(Math.floor(Math.random() * 5) + 1);
  }
  return `Rolled ${number} dice: ${results.join(", ")}`; // 直接用返回值
}