Как вы получаете строку в массив символов в JavaScript?

Как преобразовать строку в массив символов в JavaScript?

Я думаю получить строку, как "Hello world!"в массив
['H','e','l','l','o',' ','w','o','r','l','d','!']

Примечание. Это не соответствует юникоду. "I💖U".split('')приводит к массиву из 4 символов, ["I", "�", "�", "u"]который может привести к опасным ошибкам. Смотрите ответы ниже для безопасных альтернатив.

Просто разделите его на пустую строку.

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

Смотрите String.prototype.split()MDN документы .

Как hippietrail предполагает , ответ Meder в может нарушить суррогатные пары и извращают «символы.» Например:

// DO NOT USE THIS!
> '𝟘𝟙𝟚𝟛'.split('')
[ '�', '�', '�', '�', '�', '�', '�', '�' ]

Я предлагаю использовать одну из следующих функций ES2015, чтобы правильно обрабатывать эти последовательности символов.

Синтаксис распространения ( уже ответил на имя пользователя вставки здесь)

> [...'𝟘𝟙𝟚𝟛']
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Array.from

> Array.from('𝟘𝟙𝟚𝟛')
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

uФлаг RegExp

> '𝟘𝟙𝟚𝟛'.split(/(?=[\s\S])/u)
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Используйте /(?=[\s\S])/uвместо, /(?=.)/uпотому .что не совпадает с символами новой строки .

Если вы все еще находитесь в эпохе ES5.1 (или если ваш браузер неправильно обрабатывает это регулярное выражение - например, Edge), вы можете использовать эту альтернативу (предоставлено Babel ):

> '𝟘𝟙𝟚𝟛'.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/);
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Обратите внимание, что Вавилон пытается правильно обрабатывать непревзойденных суррогатов. Однако, это, кажется, не работает для непревзойденных низких суррогатов.

Протестируйте все в вашем браузере:

function run_test(){
  str=document.getElementById('nonBMP').checked ? '𝟘_NL_𝟙_HIGH_𝟚_LOW_𝟛' : '0_NL_1_HIGH_2_LOW_3';
  str=str.replace('_NL_'  ,document.getElementById('nl'  ).checked ? '\n'          : '');
  str=str.replace('_HIGH_',document.getElementById('high').checked ? '𝟘'.charAt(0) : '');
  str=str.replace('_LOW_' ,document.getElementById('low' ).checked ? '𝟘'.charAt(1) : '');
  
  //wrap all examples into try{ eval(...) } catch {} to aloow script execution if some syntax not supported (for example in Internet Explorer)
        document.getElementById("testString"   ).innerText=JSON.stringify(str);
  try { document.getElementById("splitEmpty"   ).innerText=JSON.stringify(eval('str.split("")'));            } catch(err) { }
  try { document.getElementById("splitRegexDot").innerText=JSON.stringify(eval('str.split(/(?=.)/u)'));      } catch(err) { }
  try { document.getElementById("spread"       ).innerText=JSON.stringify(eval('[...str]'));                 } catch(err) { }
  try { document.getElementById("arrayFrom"    ).innerText=JSON.stringify(eval('Array.from(str)'));          } catch(err) { }
  try { document.getElementById("splitRegex"   ).innerText=JSON.stringify(eval('str.split(/(?=[\\s\\S])/u)')); } catch(err) { }
  try { document.getElementById("splitBabel"   ).innerText=JSON.stringify(eval('str.split(/(?=(?:[\\0-\\uD7FF\\uE000-\\uFFFF]|[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]|[\\uD800-\\uDBFF](?![\\uDC00-\\uDFFF])|(?:[^\\uD800-\\uDBFF]|^)[\\uDC00-\\uDFFF]))/)')); } catch(err) { }
}


document.getElementById('runTest').onclick=run_test;

th, td {
    border: 1px solid black;
    padding: 4px;
}

<div><input type="checkbox" id="nonBMP" checked /><label for="nonBMP">Codepoints above U+FFFF</label></div>
<div><input type="checkbox" id="nl"     checked /><label for="nl"    >Newline</label></div>
<div><input type="checkbox" id="high"           /><label for="high"  >Unmached high surrogate</label></div>
<div><input type="checkbox" id="low"            /><label for="low"   >Unmached low surrogate</label></div>
<button type="button" id="runTest">Run Test!</button>

<table>
  <tr><td>str=</td>                     <td><div id="testString"></div></td></tr>
  <tr><th colspan="2">Wrong:</th></tr>
  <tr><td>str.split("")</td>            <td><div id="splitEmpty"></div></td></tr>
  <tr><td>str.split(/(?=.)/u)</td>      <td><div id="splitRegexDot"></div></td></tr>
  <tr><th colspan="2">Better:</th></tr>
  <tr><td>[...str]</td>                 <td><div id="spread"></div></td></tr>
  <tr><td>Array.from(str)</td>          <td><div id="arrayFrom"></div></td></tr>
  <tr><td>str.split(/(?=[\s\S])/u)</td> <td><div id="splitRegex"></div></td></tr>
  <tr><td>str.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/)</td><td><div id="splitBabel"></div></td></tr>
</table>

spreadСинтаксис

Вы можете использовать синтаксис распространения , инициализатор массива, представленный в стандарте ECMAScript 2015 (ES6) :

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 .

дальнейшее чтение

• MDN: оператор распространения
• ECMAScript 2015 (ES6): 12.2.5 инициализатор массива

spreadтакже упоминается как " splat" (например, в PHP или Ruby или как " 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', '!' ]

Не обязательно правильно или неправильно, просто другой вариант.

Object.assign хорошо описан на сайте MDN.

Это уже есть:

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.

Следовательно, вы можете получить массив кодовых блоков UTF-16 из строки, используя цикл for в стиле C с индексной переменной ...

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 Code Points! Это стало возможным с тех пор, как в 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);

Однако Юникод кодовых точки не самое большое, что могло возможно считать «характер» либо . Некоторые примеры вещей, которые можно разумно рассматривать как один «символ», но которые состоят из нескольких кодовых точек, включают:

• Символы с ударением, если ударение применяется с комбинированной кодовой точкой
• Флаги
• Некоторые смайлики

Ниже мы увидим, что если мы попытаемся преобразовать строку с такими символами в массив с помощью механизма итерации, описанного выше, символы будут разбиты в результирующем массиве. (В случае, если какой-либо из персонажей не отображается в вашей системе, yourStringниже представлена ​​заглавная буква A с острым акцентом, за которой следует флаг Соединенного Королевства, за которым следует чернокожая женщина.)

const yourString = 'Á🇬🇧👩🏿';
const charArray = Array.from(yourString);
console.log(charArray);

Если мы хотим сохранить каждый из них как один элемент в нашем конечном массиве, то нам нужен массив графем , а не кодовые точки.

Расщепление на графемы

JavaScript не имеет встроенной поддержки для этого - по крайней мере, пока. Поэтому нам нужна библиотека, которая понимает и реализует правила Unicode, для которых комбинация кодовых точек составляет графему. К счастью, существует одно: графем-сплиттер Орлинга . Вы можете установить его с помощью npm или, если вы не используете npm, загрузить файл index.js и использовать его с <script>тегом. Для этой демонстрации я буду загружать ее из jsDelivr.

графема-разветвитель дает нам 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>

И вот мы - массив из трех графем, что, вероятно, то, что вы хотели.

Вы можете перебрать всю длину строки и нажать символ в каждой позиции :

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

Одна возможность заключается в следующем:

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

Как насчет этого?

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

Array.prototype.slice также сделает эту работу.

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