JS字符串转数组的5种方法

在JavaScript中，将字符串转换为数组的方法多种多样，本文为您详细解读`split()`、`Array.from()`以及扩展运算符（`...`）等常用技巧。`split()`方法凭借其根据指定分隔符切割字符串的特性，成为处理CSV数据或URL参数等场景的首选。而当需要按字符拆分字符串，尤其是在处理包含Unicode字符（如表情符号）的复杂场景时，`Array.from()`和扩展运算符（`...`）则能提供更可靠的解决方案，避免`split('')`可能出现的Unicode代理对问题。文章深入探讨了各种方法的使用场景、潜在陷阱以及性能考量，旨在帮助开发者根据具体需求选择最合适的字符串转数组策略，编写出既健壮又高效的代码，提升用户体验和网站SEO表现。

最直接的方法是使用split()，它根据指定分隔符将字符串切分为数组；2. 若需按字符拆分且正确处理Unicode字符（如表情符号），应优先使用Array.from()或扩展运算符（...），因为它们能准确识别代理对；3. split('')在处理多码元字符时可能出错，且对连续空白等分隔场景需结合trim()和正则避免空元素；4. 选择方法应基于需求：按分隔符拆分用split()，字符级操作推荐Array.from()或[...str]，兼顾正确性、可读性与Unicode支持，最终确保代码稳健可靠。

JavaScript字符串转换为数组，最直接也是最常用的方法是利用字符串的split()方法，它能根据你提供的分隔符将字符串拆分成一个数组。如果你想把字符串的每个字符都变成数组的一个元素，那么Array.from()或扩展运算符（...）会是更可靠的选择，尤其是在处理一些复杂Unicode字符时。

解决方案

将字符串转换为数组，核心思路无非是“切分”或“迭代”。

1. 使用 split() 方法

这是最直观也最常用的方法。split()方法接受一个参数作为分隔符。

• 按特定字符或字符串分隔：

  

  const sentence = "Hello, world! This is a test.";
  const words = sentence.split(" "); // 使用空格作为分隔符
  console.log(words); // ["Hello,", "world!", "This", "is", "a", "test."]
  
  const tags = "javascript,web,frontend";
  const tagArray = tags.split(","); // 使用逗号作为分隔符
  console.log(tagArray); // ["javascript", "web", "frontend"]

  这里，split()就像一把剪刀，遇到分隔符就剪一刀。

• 将字符串拆分为字符数组： 如果你传入一个空字符串 '' 作为分隔符，split()会把字符串中的每个字符都拆分成数组的一个元素。

  const str = "你好JS";
  const charArray = str.split('');
  console.log(charArray); // ["你", "好", "J", "S"]

  这种方式在大多数情况下都管用，但对于某些特殊的Unicode字符（如代理对），它可能会出现问题，因为split('')是按UTF-16码元进行拆分的。

2. 使用 Array.from() 方法

Array.from()方法从一个类数组或可迭代对象创建一个新的、浅拷贝的数组实例。字符串就是可迭代对象。

const str = "你好JS?"; // ?是一个代理对字符
const charArrayFrom = Array.from(str);
console.log(charArrayFrom); // ["你", "好", "J", "S", "?"]

相比于split('')，Array.from()在处理Unicode字符，特别是代理对（Surrogate Pairs）时表现得更健壮，它能正确地将一个完整的Unicode字符视为一个元素。这在我看来，是处理字符数组更“现代”和“安全”的方式。

3. 使用扩展运算符（Spread Syntax ...）

扩展运算符也可以将可迭代对象（如字符串）“展开”成单独的元素，然后放到一个数组字面量中。

const str = "你好JS?";
const charArraySpread = [...str];
console.log(charArraySpread); // ["你", "好", "J", "S", "?"]

和Array.from()一样，扩展运算符也能正确处理Unicode代理对。这种语法简洁明了，是我个人比较偏爱的一种方式，因为它看起来非常“JavaScript”。

除了split()，还有哪些方法能将字符串转为字符数组？

当我们的目标是把字符串的每个字符都独立地转换为数组的一个元素时，split('')固然是一个选项，但它并非唯一，也不是在所有场景下都最佳。如上所述，Array.from()和扩展运算符（...）是更推荐的替代方案，尤其是在面对国际化文本或表情符号时。

Array.from()的优势在于其通用性。它不仅能处理字符串，还能转换其他类数组对象（如arguments对象、NodeList）或任何可迭代对象。对于字符串而言，它会遍历字符串的每个Unicode码点，确保即便是由两个UTF-16码元组成的字符（即代理对）也能被正确识别为一个字符，并作为数组的一个独立元素。这对于开发者来说，意味着更少的意外和更强的健壮性，特别是当你处理用户输入或从外部API获取数据时，字符编码问题总是潜在的雷区。

扩展运算符则提供了一种非常简洁的语法糖。它直接将字符串视为一个可迭代对象，将其内部的每一个“可迭代单元”展开。在字符串的语境下，这个“可迭代单元”同样是Unicode码点级别的字符。它的代码量最少，可读性极佳，一眼就能看出是在将一个序列展开为数组。我经常在需要快速将字符串拆成字符数组时使用它，因为它既高效又直观。

转换过程中可能遇到哪些常见问题或陷阱？

在字符串转换为数组的过程中，确实有一些“坑”是值得我们留意的，不然代码可能跑起来和预期大相径庭。

一个最常见的误区就是split()方法对分隔符的处理。如果你想按空格分隔，但字符串里有多个连续空格，或者开头结尾有空格，split(' ')可能会产生空字符串元素。例如，" hello world ".split(' ')会得到["", "", "hello", "world", "", ""]。这通常不是我们想要的。解决办法是先用trim()去除首尾空格，再用正则表达式/\s+/（匹配一个或多个空白字符）作为分隔符，这样就能得到干净的单词数组：" hello world ".trim().split(/\s+/)结果就是["hello", "world"]。

另一个更隐蔽的问题是Unicode字符处理。正如前面提到的，split('')在遇到由代理对组成的Unicode字符时会“犯错”。比如一个表情符号'?'，它在JavaScript内部由两个UTF-16码元表示。'?'.split('')会得到['�', '�']这样的结果（或者在某些控制台直接显示乱码），而不是我们期望的['?']。这就是为什么在需要按字符拆分时，我强烈推荐使用Array.from()或扩展运算符。它们遵循ES6的迭代协议，能正确处理这些多码元字符，确保每个完整的Unicode字符都被视为一个独立的元素。

此外，性能问题在处理极长字符串时也可能浮现。虽然对于大多数日常应用来说，这些方法的性能差异可以忽略不计，但在处理MB级别甚至GB级别的字符串时，选择一个效率更高的方法就变得重要。不过，对于字符串转数组这种操作，JavaScript引擎的优化已经做得相当好，通常我们更应该关注的是代码的清晰度和正确性，而不是过早地优化性能。

如何根据具体需求选择最合适的字符串转数组方法？

选择哪种方法，其实归根结底就是看你的“目的”是什么。

1. 如果你需要根据某个特定的“分隔符”来拆分字符串，并且这个分隔符不是字符串的每个字符本身，那么split()方法无疑是你的首选。比如，处理CSV数据（逗号分隔）、日志文件（换行符分隔）、或者URL参数（&分隔）等等。它的强项在于“切分点”的明确性。你只需要想清楚你的“刀口”在哪里。

   // 场景：解析URL查询参数
   const queryString = "name=Alice&age=30&city=NewYork";
   const params = queryString.split('&');
   // ["name=Alice", "age=30", "city=NewYork"]

2. 如果你需要将字符串中的“每一个字符”都独立地放入数组中，并且对Unicode字符（特别是表情符号、特殊符号）的正确性有要求，那么Array.from()或扩展运算符（...）是最佳实践。它们提供了一致且可靠的字符级处理，避免了split('')可能导致的Unicode代理对问题。我个人在处理用户输入的文本，或者需要对字符串进行字符级别操作（比如反转字符串、统计字符频率）时，会优先考虑这两种方法。

   // 场景：反转一个包含表情符号的字符串
   const emojiStr = "??";
   const reversedEmojiStr = [...emojiStr].reverse().join('');
   console.log(reversedEmojiStr); // ??

3. 如果你只是为了方便地将字符串转换为一个可迭代的字符集合，并没有特别的Unicode顾虑，或者说你的字符串内容都是基本的ASCII字符，那么split('')依然是一个非常简洁的选择。它的性能在简单场景下通常也足够好。

最终的选择，往往是正确性 > 可读性 > 性能。先确保你的代码能正确处理所有预期和非预期的情况（尤其是Unicode），然后选择最易读、最符合团队编码风格的方式。性能优化通常是最后才考虑的，除非你已经确定它是一个瓶颈。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS字符串转数组的5种方法》文章吧，也可关注golang学习网公众号了解相关技术文章。