如何在JavaScript中将字符串获取到字符数组?

2020/09/29 13:21 · javascript ·  · 0评论

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

我想获得一个字符串喜欢"Hello world!"到数组
['H','e','l','l','o',' ','w','o','r','l','d','!']

注意:这不符合unicode。"I💖U".split('')导致4个字符的数组["I", "�", "�", "u"],这可能导致危险的错误。有关安全替代方案,请参见下面的答案。

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

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

请参阅String.prototype.split()MDN文档

正如hippietrail所建议的那样merder的答案可能会破坏代理对并误解“字符”。例如:

// DO NOT USE THIS!
const a = '𝟘𝟙𝟚𝟛'.split('');
console.log(a);

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

传播语法(此处通过insertusername 回答

const a = [...'𝟘𝟙𝟚𝟛'];
console.log(a);

Array.from

const a = Array.from('𝟘𝟙𝟚𝟛');
console.log(a);

RegExp u标志

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

使用/(?=[\s\S])/u代替,/(?=.)/u因为.与换行符不匹配如果您仍处于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);

减少方法(已由Mark Amery 回答

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

spread语法

您可以使用传播语法,这是ECMAScript 2015(ES6)标准中引入的Array Initializer

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兼容性表


进一步阅读

spread也被称为“ splat”(例如,在PHPRuby中或被称为“ scatter”(例如,在Python中)。


演示版

购买前尝试

您也可以使用Array.from

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

此方法已在ES6中引入。

参考

Array.from

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

您可以使用Object.assign函数获取所需的输出:

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

不一定是对还是错,只是另一种选择。

在MDN站点上对Object.assign进行了很好的描述。

它已经是:

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'

您可能(至少)将三种不同的事物视为“角色”,因此,可能要使用三种不同类别的方法。

拆分为UTF-16代码单元

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

因此,通过使用带有索引变量的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中,每个unicode代码点均由两个uTF-16代码单元组成。如果使用上述方法拆分该字符串,则将得到一个由八个代码单元组成的数组:

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

拆分为Unicode代码点

因此,也许我们想将字符串拆分为Unicode代码点!自ECMAScript 2015将可迭代的概念添加到该语言以来,这已经成为可能字符串现在是可迭代的,当您遍历它们时(例如,使用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);

如果我们要保持每一种在我们的最后一个数组中的单个项目,那么我们需要的数组字形,而不是代码点。

分裂成字素

JavaScript没有对此的内置支持-至少现在还没有。因此,我们需要一个能够理解和实现Unicode规则的库,以了解哪些代码点组合构成了字素。幸运的是,存在一个:Orling的字素分解器您需要使用npm进行安装,或者,如果您不使用npm,请下载index.js文件并为其<script>添加标签。对于此演示,我将从jsDelivr加载它。

字形分离器给了我们一个GraphemeSplitter班有三种方法:splitGraphemesiterateGraphemes,和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>

然后就是-三个字素的数组,这可能就是您想要的。

您可以遍历字符串的长度并将字符推到每个位置

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))

简单的答案:

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

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

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

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

下一种可能性是:

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(''));

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

array = [...myString];

例:

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

// another example:

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

这个怎么样?

function stringToArray(string) {
  let length = string.length;
  let array = new Array(length);
  while (length--) {
    array[length] = string[length];
  }
  return array;
}
本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhongjiangzifuchuanhuoqudaozifushuzu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!