JS开发中如何将数组每一项作为独立字符串返回并存入变量

算力阿峰

2026-9-30

问题解答

JS 本身不支持单个变量同时存储多个独立的字符串值，你用 forEach 打印出多个独立字符串，本质是循环过程中多次执行打印操作，不是一次性返回了多个值。根据你的使用场景，可以选择以下两种实现方案：

方案1：拼接为带换行的单个字符串

如果接收 prop 的组件支持识别换行符渲染，直接用 Array.join() 方法拼接即可，输出效果和你示例的完全一致：

const array = ['this', 'is', 'an', 'example']
const formattedStr = array.join('\n')
/* 输出结果：
this
is
an
example
*/

你可以直接把 formattedStr 作为 prop 传给目标组件使用。

方案2：存储为数组，使用时逐个取值

如果组件需要单独处理每一个字符串（比如渲染为列表项、做单独的逻辑判断），直接将原数组作为变量存储即可，在组件内部遍历数组取出每个独立值使用：

// 存储变量
const strArray = ['this', 'is', 'an', 'example']

// 组件内使用示例（以 React 为例）
function TextList({ strArray }) {
  return (
    <ul>
      {strArray.map(item => <li key={item}>{item}</li>)}
    </ul>
  )
}

常见问题原因说明

forEach 没有返回值是API的既定设计，它仅负责遍历执行回调，如果你一定要用 forEach 实现拼接，可以在外部声明变量在回调内赋值：

let formattedStr = ''
const array = ['this', 'is', 'an', 'example']
array.forEach(elem => {
  formattedStr += elem + '\n'
})
formattedStr = formattedStr.trimEnd() // 移除末尾多余的换行