Bagaimana Anda mendapatkan string ke array karakter dalam JavaScript?

Bagaimana Anda mengonversi string ke array karakter dalam JavaScript?

Saya sedang berpikir mendapatkan string suka "Hello world!"ke array
['H','e','l','l','o',' ','w','o','r','l','d','!']

Catatan: Ini bukan unicode compliant. "I💖U".split('')menghasilkan array 4 karakter ["I", "�", "�", "u"]yang dapat menyebabkan bug berbahaya. Lihat jawaban di bawah untuk alternatif yang aman.

Hanya membaginya dengan string kosong.

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

Lihat String.prototype.split()dokumen MDN .

Seperti yang dikatakan hippietrail , jawaban meder dapat mematahkan pasangan pengganti dan salah mengartikan "karakter". Sebagai contoh:

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

Saya sarankan menggunakan salah satu fitur ES2015 berikut untuk menangani urutan karakter ini dengan benar.

Sebarkan sintaks ( sudah dijawab oleh insertusernamehere)

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

Dari Array

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

uBendera RegExp

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

Gunakan /(?=[\s\S])/usebagai ganti /(?=.)/ukarena .tidak cocok dengan baris baru .

Jika Anda masih di era ES5.1 (atau jika browser Anda tidak menangani regex ini dengan benar - seperti Edge), Anda dapat menggunakan alternatif ini (ditranslasikan oleh Babel ):

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

Perhatikan, bahwa Babel mencoba untuk menangani pengganti yang tidak cocok dengan benar. Namun, ini tampaknya tidak berhasil untuk pengganti rendah yang tak tertandingi.

Uji semua di browser Anda:

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>

The spreadSintaks

Anda dapat menggunakan sintaks spread , sebuah Initializer Array yang diperkenalkan dalam standar ECMAScript 2015 (ES6) :

var arr = [...str];

Contohnya

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

Tiga hasil pertama dalam:

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

Yang terakhir menghasilkan

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

Dukungan Browser

Periksa tabel kompatibilitas ECMAScript ES6 .

Bacaan lebih lanjut

• MDN: Sebarkan operator
• ECMAScript 2015 (ES6): 12.2.5 Array Inisialisasi

spreadjuga dirujuk sebagai " splat" (mis. dalam PHP atau Ruby atau sebagai " scatter" (misalnya dalam Python ).

Demo

Coba sebelum membeli

Anda juga bisa menggunakan Array.from.

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

Metode ini telah diperkenalkan di ES6.

Referensi

Dari Array

Ini adalah pertanyaan lama tapi saya menemukan solusi lain yang belum terdaftar.

Anda dapat menggunakan fungsi Object.assign untuk mendapatkan hasil yang diinginkan:

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

Belum tentu benar atau salah, hanyalah pilihan lain.

Object.assign dijelaskan dengan baik di situs MDN.

Sudah:

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

Atau untuk versi yang lebih ramah browser, gunakan:

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

Ada (setidaknya) tiga hal berbeda yang mungkin Anda bayangkan sebagai "karakter", dan akibatnya, tiga kategori pendekatan yang berbeda yang mungkin ingin Anda gunakan.

Membagi menjadi unit kode UTF-16

String JavaScript awalnya diciptakan sebagai urutan unit kode UTF-16, kembali pada suatu titik dalam sejarah ketika ada hubungan satu-ke-satu antara unit kode UTF-16 dan titik kode Unicode. The .lengthproperti string mengukur panjangnya di unit UTF-16 kode, dan ketika Anda melakukan someString[i]Anda mendapatkan i th UTF-16 kode unit darisomeString .

Akibatnya, Anda bisa mendapatkan array unit kode UTF-16 dari string dengan menggunakan C-style for-loop dengan variabel indeks ...

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

Ada juga berbagai cara singkat untuk mencapai hal yang sama, seperti menggunakan .split()dengan string kosong sebagai pemisah:

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

Namun, jika string Anda berisi titik kode yang terdiri dari beberapa unit kode UTF-16, ini akan membaginya menjadi unit kode individual, yang mungkin bukan yang Anda inginkan. Misalnya, string '𝟘𝟙𝟚𝟛'terdiri dari empat titik kode unicode (titik kode 0x1D7D8 hingga 0x1D7DB) yang, dalam UTF-16, masing-masing terdiri dari dua unit kode UTF-16. Jika kami membagi string itu menggunakan metode di atas, kami akan mendapatkan array delapan unit kode:

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

Membagi menjadi Poin Kode Unicode

Jadi, mungkin kita ingin membagi string kita menjadi Poin Kode Unicode! Itu dimungkinkan karena ECMAScript 2015 menambahkan konsep iterable ke bahasa. String sekarang iterables, dan ketika Anda mengulanginya (misalnya dengan for...ofloop), Anda mendapatkan poin kode Unicode, bukan unit kode UTF-16:

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

Kita dapat mempersingkat penggunaan ini Array.from, yang beralih dari iterable yang diteruskan secara implisit:

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

Namun, poin kode unicode bukan hal terbesar yang mungkin yang mungkin bisa dianggap sebagai "karakter" baik . Beberapa contoh hal-hal yang dapat dianggap sebagai "karakter" tunggal tetapi terdiri dari beberapa titik kode meliputi:

• Aksen karakter, jika aksen diterapkan dengan titik kode yang menggabungkan
• Bendera
• Beberapa emoji

Kita dapat melihat di bawah ini bahwa jika kita mencoba untuk mengubah string dengan karakter tersebut ke dalam array melalui mekanisme iterasi di atas, karakter tersebut akhirnya dipecah dalam array yang dihasilkan. (Jika salah satu karakter tidak ditampilkan di sistem Anda, di yourStringbawah ini terdiri dari huruf kapital A dengan aksen akut, diikuti oleh bendera Inggris, diikuti oleh wanita kulit hitam.)

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

Jika kita ingin menyimpan masing-masing sebagai satu item dalam array terakhir kita, maka kita perlu array grapheme , bukan titik kode.

Membagi menjadi grafem

JavaScript tidak memiliki dukungan bawaan untuk ini - setidaknya belum. Jadi kita membutuhkan pustaka yang memahami dan mengimplementasikan aturan Unicode untuk kombinasi poin kode apa yang membentuk suatu grafem. Untungnya, ada: graphling -splitter orling . Anda ingin menginstalnya dengan npm atau, jika Anda tidak menggunakan npm, unduh file index.js dan sajikan dengan<script> tag. Untuk demo ini, saya akan memuatnya dari jsDelivr.

grafem-splitter memberi kita GraphemeSplitterkelas dengan tiga metode: splitGraphemes, iterateGraphemes, dan countGraphemes. Secara alami, kami ingin 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>

Dan inilah kita - sebuah array dari tiga grapheme, yang mungkin adalah yang Anda inginkan.

Anda dapat mengulangi panjang tali dan mendorong karakter di setiap posisi :

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

jawaban sederhana:

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

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

Satu kemungkinan adalah yang berikutnya:

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

Bagaimana dengan ini?

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

Array.prototype.slice akan melakukan pekerjaan dengan baik.

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