JavaScript'te bir karakter dizisine bir dize nasıl alırsınız?

Bir dizeyi JavaScript'te bir karakter dizisine nasıl dönüştürürsünüz?

"Hello world!"Dizi gibi bir dize almayı düşünüyorum
['H','e','l','l','o',' ','w','o','r','l','d','!']

Not: Bu unicode uyumlu değildir. tehlikeli "I💖U".split('')karakterlere ["I", "�", "�", "u"]yol açabilecek 4 karakter dizisiyle sonuçlanır. Güvenli alternatifler için aşağıdaki yanıtlara bakın.

Boş bir dize ile bölün.

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

String.prototype.split()MDN belgelerine bakın .

Gibi hippietrail anlaşılacağı , Meder cevabı vekil çiftleri ve yanlış anlaşılabilir kırabilir “karakterlerini.” Örneğin:

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

Bu karakter dizilerini doğru şekilde işlemek için aşağıdaki ES2015 özelliklerinden birini kullanmanızı öneririm.

Spread sözdizimi ( insertusernamehere tarafından zaten cevaplanmıştır )

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

Array.from

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

RegExp ubayrağı

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

Kullanım /(?=[\s\S])/uyerine /(?=.)/uçünkü .yeni satır uymuyor .

Hala ES5.1 çağındaysanız (veya tarayıcınız bu regex'i Edge gibi doğru şekilde işlemiyorsa ) bu alternatifi kullanabilirsiniz ( Babel tarafından aktarılır ):

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

Unutmayın ki Babel, eşsiz vekilleri doğru bir şekilde ele almaya çalışmaktadır. Ancak, bu eşsiz düşük taşıyıcılar için işe yaramıyor gibi görünüyor.

Tarayıcınızda tümünü test edin:

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>

spreadSözdizimi

ECMAScript 2015 (ES6) standardında tanıtılan bir Array Initializer olan forma sözdizimini kullanabilirsiniz :

var arr = [...str];

Örnekler

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

İlk üç sonuç:

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

Sonuncusu

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

Tarayıcı Desteği

ECMAScript ES6 uyumluluk tablosunu kontrol edin .

daha fazla okuma

• MDN: Forma operatörü
• ECMAScript 2015 (ES6): 12.2.5 Dizi Başlatıcı

spread" splat" (örn. PHP veya Ruby'de veya " scatter" olarak da adlandırılır (örneğin Python'da ).

gösteri

Satın almadan önce deneyin

Ayrıca kullanabilirsiniz Array.from.

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

Bu yöntem ES6'da tanıtıldı.

Referans

Array.from

Bu eski bir soru ama henüz listelenmemiş başka bir çözümle karşılaştım.

İstenen çıktıyı elde etmek için Object.assign işlevini kullanabilirsiniz:

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

Mutlaka doğru ya da yanlış değil, sadece başka bir seçenek.

Object.assign, MDN sitesinde iyi tanımlanmıştır.

Zaten:

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

Veya daha eski bir tarayıcı dostu sürüm için şunu kullanın:

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

Bir "karakter" olarak düşünebileceğiniz (en azından) üç farklı şey ve sonuç olarak kullanmak isteyebileceğiniz üç farklı yaklaşım kategorisi vardır.

UTF-16 kod birimlerine bölme

JavaScript dizeleri, UTF-16 kod birimleri ile Unicode kod noktaları arasında bire bir ilişki olduğunda, geçmişte bir noktada UTF-16 kod birimlerinin dizileri olarak icat edildi. .lengthBir dize özellik UTF-16 kod birimleri uzunluğunu ölçer ve bunu yaptığında someString[i]almak i th UTF-16 kod birimi someString.

Sonuç olarak, bir dizin değişkenli bir C stili for-loop kullanarak bir dizeden UTF-16 kod birimleri dizisi alabilirsiniz ...

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

Aynı şeyi elde etmenin çeşitli kısa yolları da vardır, örneğin .split()boş dize ile ayırıcı olarak kullanmak:

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

Bununla birlikte, dizeniz birden fazla UTF-16 kod biriminden oluşan kod noktaları içeriyorsa, bu kodlar bunları tek tek kod birimlerine böler; Örneğin, dize '𝟘𝟙𝟚𝟛'UTF-16'da her biri iki UTF-16 kod biriminden oluşan dört adet unicode kod noktasından (kod noktaları 0x1D7D8 - 0x1D7DB) oluşur. Bu dizeyi yukarıdaki yöntemleri kullanarak bölersek, sekiz kodluk bir dizi alırız:

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

Unicode Kod Noktalarına Bölme

Belki de dizemizi Unicode Kod Noktalarına bölmek istiyoruz! ECMAScript 2015 , dile yinelenebilir bir kavram eklediğinden bu mümkün oldu . Dizeler artık yinelenebilir ve üzerlerinde yineleme yaptığınızda (örneğin bir for...ofdöngü ile), UTF-16 kod birimleri yerine Unicode kod noktaları elde edersiniz:

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

Array.fromÖrtük olarak geçirildiği yinelenebilir üzerinde yinelenen bu kullanımı kısaltabiliriz :

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

Ancak, unicode kod noktaları "karakter" olarak da düşünülebilecek olası en büyük şey değildir . Tek bir "karakter" olarak düşünülebilecek, ancak birden fazla kod noktasından oluşabilecek bazı örneklere şunlar dahildir:

• Vurgu bir birleştirme kod noktasıyla uygulanırsa aksanlı karakterler
• Bayraklar
• Bazı emojiler

Aşağıda, bu tür karakterleri olan bir dizeyi yukarıdaki yineleme mekanizması aracılığıyla bir diziye dönüştürmeye çalışırsak, sonuçta oluşan dizide karakterlerin parçalandığını görebiliriz. (Karakterlerin herhangi birinin sisteminizde görüntülenmemesi durumunda, yourStringaşağıda akut aksanlı bir başkent A , ardından İngiltere bayrağı ve ardından siyah bir kadın bulunur.)

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

Bunların her birini son dizimizde tek bir öğe olarak tutmak istiyorsak , kod noktalarına değil , bir grafik dizisine ihtiyacımız var .

Grafiklere bölme

JavaScript'in bunun için yerleşik bir desteği yoktur - en azından henüz. Bu nedenle, Unicode kurallarını anlayan ve uygulayan bir kitaplığa ihtiyacımız var. Neyse ki, biri var: orling'in grapheme-splitter . Npm ile yüklemek veya npm kullanmıyorsanız index.js dosyasını indirin ve bir <script>etiketle sunun . Bu demo için jsDelivr'den yükleyeceğim.

sesletim-ayırıcı bize verir GraphemeSplitter: üç yöntemleri ile sınıf splitGraphemes, iterateGraphemesve countGraphemes. Doğal olarak istiyoruz 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>

Ve işte buradayız - muhtemelen istediğin şey olan üç grafik dizisi .

Dizenin uzunluğu boyunca yineleme yapabilir ve karakteri her bir konuma itebilirsiniz :

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

basit cevap:

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

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

Bir olasılık bir sonraki:

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

Buna ne dersin?

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

Array.prototype.slice da işi yapacak.

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