Jak uzyskać ciąg do tablicy znaków w JavaScript?

Jak przekonwertować ciąg na tablicę znaków w JavaScript?

Myślę, że otrzymam ciąg podobny "Hello world!"do tablicy
['H','e','l','l','o',' ','w','o','r','l','d','!']

Uwaga: To nie jest zgodne z Unicode. "I💖U".split('')skutkuje tablicą 4 znaków, ["I", "�", "�", "u"]która może prowadzić do niebezpiecznych błędów. Zobacz odpowiedzi poniżej, aby uzyskać bezpieczne alternatywy.

Po prostu podziel go pustym ciągiem.

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

Zobacz String.prototype.split()dokumenty MDN .

Jak sugeruje hippietrail , odpowiedź medera może rozbijać pary zastępcze i błędnie interpretować „postacie”. Na przykład:

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

Sugeruję użycie jednej z następujących funkcji ES2015, aby poprawnie obsługiwać te sekwencje znaków.

Rozkładanie składni ( odpowiedź już wstawiona przez inserttusernamehere)

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

Array.from

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

uFlaga RegExp

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

Użyj /(?=[\s\S])/uzamiast, /(?=.)/uponieważ .nie pasuje do nowych linii .

Jeśli nadal jesteś w erze ES5.1 (lub jeśli Twoja przeglądarka nie obsługuje poprawnie tego wyrażenia regularnego - takiego jak Edge), możesz użyć tej alternatywy (transpilowanej przez Babel ):

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

Zauważ, że Babel próbuje również poprawnie obsługiwać niedopasowane parametry zastępcze. Nie wydaje się to jednak działać w przypadku niedopasowanych niskich surogatów.

Przetestuj wszystko w przeglądarce:

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>

spreadSkładnia

Możesz użyć składni stron widzących , inicjatora macierzy wprowadzonego w standardzie ECMAScript 2015 (ES6) :

var arr = [...str];

Przykłady

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

Pierwsze trzy wynik to:

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

Ostatni powoduje

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

Obsługa przeglądarki

Sprawdź tabelę zgodności ECMAScript ES6 .

Dalsza lektura

• MDN: operator rozprzestrzeniania
• ECMAScript 2015 (ES6): 12.2.5 Inicjator macierzy

spreadjest również określany jako „ splat” (np. w PHP lub Ruby lub jako „ scatter” (np. w Pythonie ).

Próbny

Wypróbuj przed zakupem

Możesz także użyć Array.from.

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

Ta metoda została wprowadzona w ES6.

Odniesienie

Array.from

To stare pytanie, ale natknąłem się na inne rozwiązanie jeszcze nie wymienione.

Możesz użyć funkcji Object.assign, aby uzyskać pożądany wynik:

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

Niekoniecznie dobre lub złe, tylko inna opcja.

Object.assign jest dobrze opisany na stronie MDN.

To już jest:

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

Lub w przypadku starszej wersji przyjaznej dla przeglądarki użyj:

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

Istnieją (co najmniej) trzy różne rzeczy, które możesz postrzegać jako „postać”, aw konsekwencji trzy różne kategorie podejścia, które możesz chcieć zastosować.

Podział na jednostki kodu UTF-16

Ciągi JavaScript zostały pierwotnie wynalezione jako sekwencje jednostek kodu UTF-16, w pewnym momencie historii, kiedy istniała relacja jeden-do-jednego między jednostkami kodu UTF-16 a punktami kodu Unicode. .lengthWłasnością łańcucha mierzy jego długość w jednostkach UTF-16 kodowych, a kiedy to zrobisz someString[i]dostaniesz I th UTF-16 jednostki kodusomeString .

W związku z tym możesz uzyskać tablicę jednostek kodu UTF-16 z ciągu, używając pętli for w stylu C ze zmienną indeksową ...

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

Istnieją również różne krótkie sposoby osiągnięcia tego samego, na przykład użycie .split()pustego łańcucha jako separatora:

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

Jeśli jednak ciąg zawiera punkty kodowe złożone z wielu jednostek kodu UTF-16, spowoduje to podzielenie ich na poszczególne jednostki kodu, co może nie być tym, czego chcesz. Na przykład ciąg znaków '𝟘𝟙𝟚𝟛'składa się z czterech punktów kodu Unicode (punkty kodu od 0x1D7D8 do 0x1D7DB), które w UTF-16 składają się z dwóch jednostek kodu UTF-16. Jeśli podzielimy ten ciąg przy użyciu powyższych metod, otrzymamy tablicę ośmiu jednostek kodu:

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

Podział na punkty kodu Unicode

Być może chcemy zamiast tego podzielić nasz ciąg znaków na punkty kodowe Unicode! Było to możliwe, ponieważ ECMAScript 2015 dodał koncepcję iteracji do języka. Ciągi są teraz iterowalne, a gdy iterujesz nad nimi (np. Za pomocą for...ofpętli), otrzymujesz punkty kodu Unicode, a nie jednostki kodu UTF-16:

const yourString = '𝟘𝟙𝟚𝟛';
const charArray = [];
for (const char of yourString) {
  charArray.push(char);
}
console.log(charArray);

Możemy skrócić to, używając Array.fromiteracji w stosunku do iterowności, która została przekazana niejawnie:

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

Jednak punkty kodu Unicode nie są największą możliwą rzeczą, którą można by uznać za „znak” albo . Niektóre przykłady rzeczy, które można rozsądnie uznać za pojedynczy „znak”, ale składać się z wielu punktów kodowych, obejmują:

• Znaki akcentowane, jeśli akcent jest stosowany z łączącym punktem kodowym
• Flagi
• Niektóre emoji

Widzimy poniżej, że jeśli spróbujemy przekonwertować ciąg z takimi znakami na tablicę za pomocą powyższego mechanizmu iteracji, znaki zostaną podzielone na wynikową tablicę. (W przypadku, gdy żadna z postaci nie renderuje się w twoim systemie, yourStringponiżej składa się z dużej litery A z ostrym akcentem, po której następuje flaga Wielkiej Brytanii, a następnie czarna kobieta).

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

Jeśli chcemy zachować każdy z nich jako pojedynczy element w końcowej tablicy, potrzebujemy tablicy grafemów , a nie punktów kodowych.

Podział na grafemy

JavaScript nie ma wbudowanej obsługi tego - przynajmniej jeszcze nie. Potrzebujemy więc biblioteki, która rozumie i implementuje reguły Unicode dla tego, która kombinacja punktów kodowych stanowi grafem. Na szczęście, jeden istnieje: orling jest grafem-splitter . Będziesz chciał zainstalować go z npm lub, jeśli nie używasz npm, pobierz plik index.js i podaj go ze <script>znacznikiem. W tym demo załaduję go z jsDelivr.

grafem-splitter daje nam GraphemeSplitterlekcje z trzech metod: splitGraphemes, iterateGraphemes, i countGraphemes. Oczywiście chcemy 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>

I oto jesteśmy - tablica trzech grafemów, prawdopodobnie tego właśnie chciałeś.

Możesz iterować na całej długości łańcucha i przesuwać znak w każdej pozycji :

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

prosta odpowiedź:

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

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

Jedna z możliwości jest następna:

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

Co powiesz na to?

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

Array.prototype.slice również wykona pracę.

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