JS 字符串转数组：split、扩展语法、Array.from等6种方法详解

数组是 JavaScript 中最强大的数据结构之一，我在解决许多算法问题时，经常需要将字符串转换为数组。因此，我整理并比较了多种实现这一转换的方法。

过去，字符串转数组通常依赖 split() 方法，但在 ES6 发布后，出现了更多工具可以实现相同的功能。接下来，我们将逐一介绍这些方法，并分析各自的优缺点。

1、使用 .split('')

split() 是一个字符串方法，它可以根据指定的模式将字符串拆分为有序数组。这是一种 ES6 标准方法，也是目前最简洁的转换方式。

////* Seperate string by space character(' ') *////

const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split('');
console.log(myFavShowArray) //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

此外，该方法支持通过特定字符或空格来分隔字符串。以下是具体的使用示例。

////* Seperate string by whitespace(' ') *////
const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split(' ');
console.log(myFavShowArray) //['The', 'Office']


////* Seperate string by a character '-' *////
const favDialogue = 'Thats-what-she-said';
const favDialogueArr = favDialogue.split('-');
console.log(favDialogueArr) //['Thats', 'what', 'she', 'said']

split() 同样支持正则表达式，如需了解更多细节，可查阅 split() 的完整文档。

虽然这种方式能完美地将字符串元素分离到数组中，但它也存在一定的局限性。

注意：此方法在处理非常规 Unicode 字符时存在缺陷。它返回的是字符的 Unicode 编码值而非实际字符，这可能会增加处理难度。不过，MDN 文档已更新，若在使用 split() 时添加 'u' 标志，即可正确处理 Unicode 字符。

"😄😄".split(/(?:)/); // [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]
"😄😄".split(/(?:)/u); // [ "😄", "😄" ]

2、使用扩展语法 ([…str])

这是 ES2015 引入的特性，使得字符串转换变得极其简便。

const myFavShow = 'The Office'

const myFavShowArray = [...myFavShow]

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

这种方法消除了 split() 中的部分限制，参考以下示例，我们可以轻松拆分任意字符。

const animal = '🦊🦊'
const animalArr = [...animal]
console.log(animalArr) // ['🦊', '🦊']

3、使用 Array.from(str)

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

const myFavShow = 'The Office'

const myFavShowArray = Array.from(myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

这种方法在处理非常规字符时不会遇到任何问题，表现稳定。

const str = '😎😎'
const arr = Array.from(str)
console.log(arr)

// ['😎', '😎']

4、使用 Object.assign([], str)

assign() 方法的作用是将一个或多个源对象的所有属性复制到目标对象。使用此方法时需注意两点：首先，目标对象必须存在；其次，assign() 复制的是属性值（在此场景下表现为浅拷贝行为），使用前务必明确这一点。

const myFavShow = 'The Office'

const myFavShowArray = Object.assign([], myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

其次，该方法与 split() 面临相同的困境：无法正确分隔非常规字符（显示为 Unicode 编码而非实际字符）。

const s = '😄😄'
const a = Array.from(s)
console.log(a) // ['😄', '😄']

5、使用老式方法（for 循环和 array.push()）

尽管现代 JavaScript 提供了多种便捷选项，但仍值得提及这种传统方法：通过 for 循环遍历字符串，并利用数组的 push() 方法将元素逐个推入数组。

这并非最优雅的写法，但对于希望避免 JavaScript 复杂语法的开发者而言，这是一个值得了解的备选方案（尽管我个人更推荐现代写法）。

const s = 'the office';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a); // ['t', 'h', 'e', ' ', 'o', 'f', 'f', 'i', 'c', 'e']

此外，该方法对非常规（Unicode）字符的支持也非常良好。请参考以下示例。

const s = '𝟘𝟙𝟚𝟛😄😄';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a); //['𝟘', '𝟙', '𝟚', '𝟛', '😄', '😄']

6、使用 Array.prototype.slice.call('string')

const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e', '!']

此方法同样存在与 split() 相同的问题，即无法正确处理非常规字符，因此使用时需谨慎。

const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['\uD83D', '\uDE04', '\uD83D', '\uDE04']

至此，关于 JavaScript 实现字符串转数组的六种方法总结完毕。如需了解更多相关内容，欢迎查阅本站往期文章或继续浏览后续内容，感谢大家的支持！

JavaScript 实现字符串转数组的 6 种方法总结