आपको जावास्क्रिप्ट में एक चरित्र सरणी के लिए एक स्ट्रिंग कैसे मिलती है?

Question

आप जावास्क्रिप्ट में एक स्ट्रिंग को कैरेक्टर ऐरे में कैसे बदलेंगे?

मैं "Hello world!"सरणी की तरह एक स्ट्रिंग हो रही है सोच रहा हूँ
['H','e','l','l','o',' ','w','o','r','l','d','!']

Answer 1

नोट: यह यूनिकोड अनुरूप नहीं है। "I💖U".split('')4 वर्ण सरणी में परिणाम ["I", "�", "�", "u"]जो खतरनाक कीड़े पैदा कर सकता है। सुरक्षित विकल्पों के लिए नीचे दिए गए उत्तर देखें।

बस इसे एक खाली स्ट्रिंग द्वारा विभाजित करें।

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

String.prototype.split()MDN डॉक्स देखें ।

Comments

यह सरोगेट जोड़े को ध्यान में नहीं रखता है। "𨭎".split('')में परिणाम ["�", "�"]।

— हिप्पिएट्रेल

इस धागे में कहीं और @ हक्शी का जवाब देखें। उम्मीद है कि हर कोई इसे देखता है ... इस विधि का उपयोग न करें, यह सुरक्षित नहीं है

— i336_

पार्टी के लिए थोड़ा देर से। लेकिन कोई कभी एक स्ट्रिंग की एक सरणी क्यों बनाना चाहेगा? एक स्ट्रिंग पहले से ही एक सरणी है या क्या मैं गलत हूं? "randomstring".length; //12 "randomstring"[2]; //"n"

— लुइगी वैन डेर पाल

@LuigivanderPal एक स्ट्रिंग एक सरणी नहीं है, लेकिन यह बहुत समान है। हालांकि, यह वर्णों के एक सरणी के समान नहीं है। एक स्ट्रिंग 16-बिट संख्याओं की एक सरणी के समान है, जिनमें से कुछ वर्णों का प्रतिनिधित्व करते हैं और जिनमें से कुछ एक सरोगेट जोड़ी के आधे हिस्से का प्रतिनिधित्व करते हैं। उदाहरण के लिए, str.lengthआपको स्ट्रिंग में वर्णों की संख्या नहीं बताती है, क्योंकि कुछ वर्ण दूसरों की तुलना में अधिक स्थान लेते हैं; str.lengthआपको 16-बिट की संख्या बताता है।

— थियोडोर नॉरवेल

Answer 2

जैसा कि हिप्पेट्रैइल सुझाव देता है , मध्यस्थ का जवाब सरोगेट जोड़े को तोड़ सकता है और "पात्रों" की गलत व्याख्या कर सकता है। उदाहरण के लिए:

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

मेरा सुझाव है कि इन चरित्र अनुक्रमों को सही ढंग से संभालने के लिए निम्न ES2015 विशेषताओं में से एक का उपयोग करना।

फैला हुआ वाक्यविन्यास ( पहले से ही सम्मिलन द्वारा उत्तर दिया गया)

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

Array.from

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

RegExp uझंडा

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

/(?=[\s\S])/uइसके बजाय का उपयोग करें /(?=.)/uक्योंकि .newlines से मेल नहीं खाता ।

आप ES5.1 युग में अब भी कर रहे हैं (या यदि आपके ब्राउज़र सही ढंग से इस regex प्रबंधन नहीं करती है - एज की तरह), तो आप इस विकल्प का उपयोग कर सकते हैं (द्वारा transpiled कोलाहल ):

> '𝟘𝟙𝟚𝟛'.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>

Comments

आपने ये पात्र कैसे बनाए? ऐसा लगता है कि प्रत्येक वर्ण 4 बाइट्स है।

— user420667

@ user420667 वर्ण "बड़े" कोडपॉइंट्स के साथ एक अतिरिक्त चरित्र विमान (यूनिकोड तालिका में) से हैं इसलिए वे 16 बाइट में फिट नहीं होते हैं। जावास्क्रिप्ट में उपयोग किए गए utf-16 एन्कोडिंग इन पात्रों को सरोगेट जोड़े के रूप में प्रस्तुत करते हैं (विशेष वर्ण जो केवल अतिरिक्त विमानों से अन्य वर्ण बनाने के लिए जोड़े के रूप में उपयोग किए जाते हैं)। केवल पात्रों को मुख्य चरक विमान 16 बाइट्स के साथ प्रस्तुत किया जाता है। सरूगेट की जोड़ी के खास किरदार भी मुख्य किरदार के प्लेन से ही होते हैं, अगर यह सेंस बनाता है।

— ओल्गा

अलग-अलग तकनीकों का प्रदर्शन , स्प्रेड ऑप शोम (क्रोम 58) जैसा दिखता है।

— एड्रियन

ध्यान दें कि यह समाधान कुछ इमोजी को विभाजित करता है जैसे कि 🏳️‍🌈, और वर्णों से डायक्रिटिक्स चिह्न के संयोजन को विभाजित करता है। यदि आप वर्णों के बजाय अंगूर के समूहों में विभाजित करना चाहते हैं, तो stackoverflow.com/a/45238376 देखें ।

— user202729

ध्यान दें कि सरोगेट जोड़ियों को अलग नहीं करना महान है, यह "वर्ण" (या अधिक सटीक, अंगूर ) को एक साथ रखने के लिए एक सामान्य-उद्देश्य समाधान नहीं है । एक अंगूर कई कोड बिंदुओं से बना हो सकता है; उदाहरण के लिए, देवनागरी भाषा का नाम "देवनागरी" है, जिसे एक देशी वक्ता ने पांच अंगूरों के रूप में पढ़ा है, लेकिन उत्पादन के लिए आठ कोड पॉइंट लेता है ...

— TJ Crowder

Answer 3

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: स्प्रेड ऑपरेटर
• ईसीएमएस्क्रिप्ट 2015 (ईएस 6): 12.2.5 एरियर प्रारंभिक

spreadइसे " splat" के रूप में भी संदर्भित किया जाता है (उदाहरण के लिए PHP या रूबी में या " scatter" (जैसे पायथन में )।

---

डेमो

खरीदने से पहले कोशिश करें

Comments

यदि आप ES5 के लिए संकलक के साथ संयोजन में प्रसार ऑपरेटर का उपयोग करते हैं तो यह IE में काम नहीं करेगा। उस पर विचार करो। मुझे यह पता लगाने में घंटों लग गए कि समस्या क्या थी।

— स्टेफ वैन डेन बर्ग

Answer 4

आप भी इस्तेमाल कर सकते हैं Array.from।

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

इस विधि को ES6 में पेश किया गया है।

संदर्भ

Array.from

Answer 5

यह एक पुराना सवाल है, लेकिन मैं अभी तक सूचीबद्ध नहीं एक और समाधान के पार आया था।

आप वांछित आउटपुट प्राप्त करने के लिए Object.assign फ़ंक्शन का उपयोग कर सकते हैं:

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

जरूरी नहीं कि सही हो या गलत, बस एक और विकल्प।

Object.assign को MDN साइट पर अच्छी तरह वर्णित किया गया है।

Comments

यह एक लंबा रास्ता तय करना है Array.from("Hello, world")।

— टीजे क्राउडर

@TJCrowder यह एक लंबा रास्ता तय करना है[..."Hello, world"]

— Chharvey

@ चरवाहे - हेह। :-)

— टीजे क्राउडर

Answer 6

यह पहले से ही है:

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'

Comments

-1: यह नहीं है। इसे आज़माएं:alert("Hello world!" == ['H','e','l','l','o',' ','w','o','r','l','d'])

— आर। मार्टिनो फर्नांडिस

माफ़ करना। मुझे लगता है कि मेरे कहने का मतलब यह है: "आप एक चरित्र सरणी बनाए बिना इस तरह से इंडेक्स संदर्भ द्वारा व्यक्तिगत वर्णों तक पहुंच सकते हैं"।

— दानीसमाऊ

मज़बूती से क्रॉस-ब्राउज़र नहीं कर सकते। यह एक ECMAScript पांचवा संस्करण फीचर है।

— बॉब डेन्स

क्रॉस-ब्राउज़र संस्करण है mystring.charAt(index)।

— १

+1 के लिए - charAt()हालांकि मैं ऐरे-ईश संस्करण का उपयोग करना पसंद करूंगा। डारन आईई।

— ज़ेनेकर

Answer 7

वहाँ (कम से कम) तीन अलग-अलग चीजें हैं जो आप एक "चरित्र" के रूप में गर्भ धारण कर सकते हैं, और परिणामस्वरूप, दृष्टिकोण की तीन अलग-अलग श्रेणियां जिन्हें आप उपयोग करना चाहते हैं।

UTF-16 कोड इकाइयों में विभाजन

जावास्क्रिप्ट स्ट्रिंग्स को मूल रूप से UTF-16 कोड इकाइयों के अनुक्रम के रूप में आविष्कार किया गया था, इतिहास के एक बिंदु पर वापस जब UTF-16 कोड इकाइयों और यूनिकोड कोड बिंदुओं के बीच एक-से-एक संबंध था। .lengthएक स्ट्रिंग की संपत्ति UTF-16 कोड इकाइयों में इसकी लंबाई को मापती है, और जब आप करते someString[i]हैं तो आपको i UTF-16 कोड इकाई मिल जाती है someString।

नतीजतन, आप एक इंडेक्स के साथ सी-स्टाइल फॉर-लूप का उपयोग करके स्ट्रिंग से UTF-16 कोड इकाइयों की एक सरणी प्राप्त कर सकते हैं ...

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

यूनिकोड कोड पॉइंट में विभाजन

इसलिए, शायद हम अपनी स्ट्रिंग को यूनिकोड कोड पॉइंट्स में विभाजित करना चाहते हैं! यह संभव हो गया है क्योंकि ECMAScript 2015 ने भाषा के लिए एक पुनरावृत्ति की अवधारणा को जोड़ा है । स्ट्रिंग्स अब पुनरावृत्तियाँ हैं, और जब आप उन पर पुनरावृति करते हैं (जैसे for...ofलूप के साथ ), तो आपको यूनिकोड कोड पॉइंट मिलते हैं, न कि 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);

यदि हम इनमें से प्रत्येक को अपने अंतिम सरणी में एकल आइटम के रूप में रखना चाहते हैं, तो हमें अंगूर की एक सरणी की आवश्यकता है कोड पॉइंट नहीं, बल्कि ।

अंगूरों में बंटना

जावास्क्रिप्ट के पास इसके लिए कोई अंतर्निहित समर्थन नहीं है - कम से कम अभी तक नहीं। इसलिए हमें एक पुस्तकालय की आवश्यकता है जो कोड बिंदुओं के संयोजन के लिए यूनिकोड नियमों को समझता और लागू करता है। सौभाग्य से, एक अस्तित्व में है: ओर्लिंग्स ग्रेफेम -स्प्लिटर । आप इसे npm के साथ स्थापित करना चाहेंगे या, यदि आप npm का उपयोग नहीं कर रहे हैं, तो index.js फ़ाइल डाउनलोड करें और इसे a के साथ सेवा दें<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>

और वहाँ हम हैं - तीन अंगूरों की एक सरणी, जो शायद आप चाहते थे।

Answer 8

आप स्ट्रिंग की लंबाई पर पुनरावृति कर सकते हैं और प्रत्येक स्थिति में चरित्र को धक्का दे सकते हैं :

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

Comments

जबकि यह दृष्टिकोण घोषणात्मक की तुलना में थोड़ा अधिक जरूरी है, यह इस धागे में किसी भी व्यक्ति का सबसे अधिक प्रदर्शन है और अधिक प्यार का हकदार है। किसी स्ट्रिंग को स्थिति के आधार पर एक चरित्र को पुनः प्राप्त करने के लिए एक सीमा तब होती है जब इमोजीस जैसे यूनिकोड में बेसिक बहुभाषी योजना के अतीत के पात्रों के साथ व्यवहार किया जाता है। एक अनुपयोगी चरित्र "😃".charAt(0)

— लौटाएगा

@KyleMit यह केवल एक छोटे इनपुट के लिए सच है। एक लंबे इनपुट का उपयोग .split("")करने से सबसे तेज विकल्प फिर से

— लक्स

यह भी .split("")फ़ायरफ़ॉक्स में भारी अनुकूलित किया जा रहा है। जबकि लूप में क्रोम में समान प्रदर्शन होता है और छोटे और बड़े इनपुट के लिए फ़ायरफ़ॉक्स में फ़ायरफ़ॉक्स स्प्लिट काफी तेज होता है।

— लक्स

Answer 9

सरल उत्तर:

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

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

Comments

-1; इसमें कुछ भी शामिल नहीं है जो पहले से ही हाकातिशी के जवाब में शामिल नहीं था ।

— मार्क अमेरी

Answer 10

एक संभावना अगले है:

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

Answer 11

इस बारे में कैसा है?

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

Comments

@KyleMit आई लूप + पुश jsperf.com/string-to-character-array/3 की

— msand

Answer 12

Array.prototype.slice काम भी करेगा।

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