Як отримати рядок до масиву символів у JavaScript?

Як перетворити рядок у масив символів у 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 передбачає , відповідь Meder в може порушити сурогатні пари і перекручують «символи.» Наприклад:

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

Я пропоную використовувати одну з наступних функцій ES2015 для правильної обробки цих послідовностей символів.

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

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

Array.from

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

RegExp uпрапор

> '𝟘𝟙𝟚𝟛'.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]))/);
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Зауважте, що Babel намагається правильно поводитися з неперевершеними сурогатами. Однак, схоже, це не працює для неперевершених низьких сурогатів.

Перевірте все у своєму браузері:

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 з рядка, використовуючи C-стиль for-loop із змінною індексу ...

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, це розділить їх на окремі кодові одиниці, що може не бути тим, що вам потрібно. Наприклад, рядок '𝟘𝟙𝟚𝟛'складається з чотирьох точок коду унікоду (кодові точки від 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 додав до мови концепцію перебору . Струни тепер ітерабельні, і коли ви повторюєте їх (наприклад, з 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внизу складається з великої літери А з гострим акцентом, за якою йде прапор Сполученого Королівства, а за ним чорна жінка.)

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