如何从字符串中获取字符数组？

Question

如何在 JavaScript 中将字符串转换为字符数组？

我正在考虑将"Hello world!" 之类的字符串添加到数组中
['H','e','l','l','o',' ','w','o','r','l','d','!']

Answer 1

注意：这不符合 Unicode。 "I?U".split('') 导致 4 个字符数组 ["I", "�", "�", "u"] 可能导致危险 错误。请参阅下面的答案以获取安全的替代方案。

只需将其拆分为空字符串即可。

var output = "Hello world!".split('');
console.log(output);

请参阅String.prototype.split() MDN docs。

Answer 2

已经是了：

var mystring = 'foobar';
console.log(mystring[0]); // Outputs 'f'
console.log(mystring[3]); // Outputs 'b'

或者对于更旧的浏览器友好版本，使用：

var mystring = 'foobar';
console.log(mystring.charAt(3)); // Outputs 'b'

Answer 3

spread 语法

您可以使用spread syntax，这是ECMAScript 2015 (ES6) standard 中引入的数组初始化器：

var arr = [...str];

---

示例

function a() {
    return arguments;
}

var str = 'Hello World';

var arr1 = [...str],
    arr2 = [...'Hello World'],
    arr3 = new Array(...str),
    arr4 = a(...str);

console.log(arr1, arr2, arr3, arr4);

前三个结果为：

["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

最后一个结果

{0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "W", 7: "o", 8: "r", 9: "l", 10: "d"}

---

浏览器支持

检查ECMAScript ES6 compatibility table。

---

进一步阅读

• MDN: Spread operator
• ECMAScript 2015 (ES6): 12.2.5 Array Initializer

spread 也被称为“splat”（例如在PHP 或Ruby 或“scatter”（例如在@ 987654328@).

---

演示

Try before buy

Answer 4

因为hippietrail suggests，meder's answer 可以打破 代理对和误解“字符”。例如：

// DO NOT USE THIS!
const a = '????'.split('');
console.log(a);
// Output: ["�","�","�","�","�","�","�","�"]

我建议使用以下 ES2015 功能之一来正确处理这些 字符序列。

扩展语法（already answered by insertusernamehere）

const a = [...'????'];
console.log(a);

Array.from

const a = Array.from('????');
console.log(a);

RegExp u flag

const a = '????'.split(/(?=[\s\S])/u);
console.log(a);

使用/(?=[\s\S])/u 而不是/(?=.)/u，因为. does not match newlines。如果你还在 ES5.1 时代（或者你的浏览器没有 正确处理此正则表达式 - 如 Edge），您可以使用以下替代方法 （由Babel 转译）。请注意，Babel 也尝试处理不匹配的 正确代理。但是，这似乎不适用于无与伦比的低 代理。

const a = '????'.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/);
console.log(a);

减少方法（already answered by Mark Amery）

const s = '????';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a);

Answer 5

这是一个老问题，但我遇到了另一个尚未列出的解决方案。

您可以使用 Object.assign 函数来获得所需的输出：

var output = Object.assign([], "Hello, world!");
console.log(output);
    // [ 'H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!' ]

不一定对或错，只是另一种选择。

Object.assign is described well at the MDN site.

Answer 6

您可以遍历字符串的长度并推送character at each position：

const str = 'Hello World';

const stringToArray = (text) => {
  var chars = [];
  for (var i = 0; i < text.length; i++) {
    chars.push(text[i]);
  }
  return chars
}

console.log(stringToArray(str))

Answer 7

您也可以使用Array.from。

var m = "Hello world!";
console.log(Array.from(m))

这个方法已经在 ES6 中引入。

参考

Array.from

Answer 8

这个怎么样？

function stringToArray(string) {
  let length = string.length;
  let array = new Array(length);
  while (length--) {
    array[length] = string[length];
  }
  return array;
}

Answer 9

简单回答：

let str = 'this is string, length is >26';

console.log([...str]);

Answer 10

Array.prototype.slice 也会完成这项工作。

const result = Array.prototype.slice.call("Hello world!");
console.log(result);

Answer 11

您可能会将（至少）三种不同的事物视为“角色”，因此，您可能想要使用三种不同类别的方法。

分割成 UTF-16 编码单元

JavaScript 字符串最初是作为 UTF-16 代码单元序列发明的，可以追溯到 UTF-16 代码单元和 Unicode 代码点之间存在一对一关系的历史时刻。字符串的.length 属性以UTF-16 代码单元测量其长度，当您执行someString[i] 时，您将获得someString 的第i 个UTF-16 代码单元。

因此，您可以通过使用带有索引变量的 C 风格 for 循环从字符串中获取 UTF-16 代码单元数组...

const yourString = 'Hello, World!';
const charArray = [];
for (let i=0; i<=yourString.length; i++) {
    charArray.push(yourString[i]);
}
console.log(charArray);

也有多种简短的方法可以实现相同的目的，例如使用.split() 和空字符串作为分隔符：

const charArray = 'Hello, World!'.split('');
console.log(charArray);

但是，如果您的字符串包含由多个 UTF-16 代码单元组成的代码点，这会将它们拆分为单独的代码单元，这可能不是您想要的。例如，字符串'????' 由四个 unicode 代码点（代码点 0x1D7D8 到 0x1D7DB）组成，在 UTF-16 中，每个代码点由两个 UTF-16 代码单元组成。如果我们使用上述方法拆分该字符串，我们将得到一个包含八个代码单元的数组：

const yourString = '????';
console.log('First code unit:', yourString[0]);
const charArray = yourString.split('');
console.log('charArray:', charArray);

分割成 Unicode 码位

所以，也许我们希望将字符串拆分为 Unicode 代码点！自从 ECMAScript 2015 向语言中添加了 iterable 的概念以来，这已经成为可能。字符串现在是可迭代的，当你迭代它们时（例如，使用for...of 循环），你会得到 Unicode 代码点，而不是 UTF-16 代码单元：

const yourString = '????';
const charArray = [];
for (const char of yourString) {
  charArray.push(char);
}
console.log(charArray);

我们可以使用Array.from 来缩短它，它会遍历隐式传递的可迭代对象：

const yourString = '????';
const charArray = Array.from(yourString);
console.log(charArray);

然而，unicode 代码点并不是最大的可能被视为“字符”的东西也。可以合理地被视为单个“字符”但由多个代码点组成的一些示例包括：

• 重音字符，如果重音与组合代码点一起应用
• 标志
• 一些表情符号

我们可以在下面看到，如果我们尝试通过上面的迭代机制将包含此类字符的字符串转换为数组，则字符最终会在结果数组中分解。 （如果任何字符没有在您的系统上呈现，下面的yourString 由带有尖锐口音的大写A 组成，然后是英国国旗，然后是一个黑人妇女.)

const yourString = 'Á????';
const charArray = Array.from(yourString);
console.log(charArray);

如果我们想将这些中的每一个作为单个项目保留在最终数组中，那么我们需要一个 graphemes 数组，而不是代码点。

分割成字形

JavaScript 对此没有内置支持——至少目前还没有。因此，我们需要一个库来理解和实现 Unicode 规则，以确定哪些代码点组合构成字素。幸运的是，存在一个：orling 的grapheme-splitter。您需要使用 npm 安装它，或者，如果您不使用 npm，请下载 index.js 文件并使用 <script> 标签提供它。对于这个演示，我将从 jsDelivr 加载它。

grapheme-splitter 为我们提供了一个 GraphemeSplitter 类，它具有三个方法：splitGraphemes、iterateGraphemes 和 countGraphemes。当然，我们想要splitGraphemes：

const splitter = new GraphemeSplitter();
const yourString = 'Á????';
const charArray = splitter.splitGraphemes(yourString);
console.log(charArray);

<script src="https://cdn.jsdelivr.net/npm/grapheme-splitter@1.0.4/index.js"></script>

我们得到了 - 一个由三个字素组成的数组，可能正是您想要的。

Answer 12

一种可能性是下一种：

console.log([1, 2, 3].map(e => Math.random().toString(36).slice(2)).join('').split('').map(e => Math.random() > 0.5 ? e.toUpperCase() : e).join(''));

Answer 13

ES6 将字符串按字符拆分为数组的方法是使用扩展运算符。简单又好看。

array = [...myString];

例子：

let myString = "Hello world!"
array = [...myString];
console.log(array);

// another example:

console.log([..."another splitted text"]);

Answer 14

在 JavaScript 中将字符串转换为字符数组的 4 种方法：

const string = 'word';

// Option 1
string.split('');  // ['w', 'o', 'r', 'd']

// Option 2
[...string];  // ['w', 'o', 'r', 'd']

// Option 3
Array.from(string);  // ['w', 'o', 'r', 'd']

// Option 4
Object.assign([], string);  // ['w', 'o', 'r', 'd']