คุณจะรับสตริงไปยังอาร์เรย์อักขระใน 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('𝟘𝟙𝟚𝟛')
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

uตั้งค่าสถานะRegExp

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

ใช้/(?=[\s\S])/uแทน/(?=.)/uเพราะไม่ตรงกับการขึ้นบรรทัดใหม่.

หากคุณยังอยู่ในยุค ES5.1 (หรือถ้าเบราว์เซอร์ของคุณไม่จัดการ regex นี้อย่างถูกต้อง - เช่น Edge) คุณสามารถใช้ทางเลือกนี้ (transpiled โดย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ไวยากรณ์

คุณสามารถใช้ไวยากรณ์การแพร่กระจายซึ่งเป็น Array Initializer ที่นำมาใช้ในมาตรฐาน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 Array Initializer

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]คุณจะได้รับฉัน TH UTF-16 someStringรหัสหน่วยของ

ดังนั้นคุณสามารถรับอาร์เรย์ของรหัสหน่วย UTF-16 จากสตริงโดยใช้รูปแบบ C-for-loop พร้อมกับตัวแปร index ...

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 Code Points แทน! มันเป็นไปได้ตั้งแต่ ECMAScript 2015 ได้เพิ่มแนวคิดของการทำซ้ำให้กับภาษา ตอนนี้สตริงเป็น iterables และเมื่อคุณวนซ้ำ (เช่นfor...ofวนซ้ำ) คุณจะได้รับคะแนนโค้ด Unicode ไม่ใช่หน่วยรหัส UTF-16:

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

เราสามารถย่นการใช้นี้ให้สั้นลงArray.fromซึ่งจะวนซ้ำไปเรื่อย ๆ ผ่านการ iterable:

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

อย่างไรก็ตามจุดรหัส Unicode ไม่ได้ในสิ่งที่เป็นไปได้ที่ใหญ่ที่สุดที่อาจจะถือว่าเป็น "ตัวละคร" อย่างใดอย่างหนึ่ง ตัวอย่างของสิ่งต่าง ๆ ที่อาจถือได้ว่าเป็น "ตัวละคร" อย่างเดียว แต่ควรประกอบด้วยรหัสจุดหลายจุดรวมถึง

• อักขระที่เน้นเสียงหากมีการใช้สำเนียงนั้นกับจุดรวมรหัส
• ธง
• อิโมจิบางอย่าง

เราสามารถเห็นด้านล่างว่าถ้าเราพยายามแปลงสตริงที่มีตัวอักษรดังกล่าวเป็นอาเรย์ผ่านกลไกการทำซ้ำด้านบนตัวละครจะแตกตัวในอาร์เรย์ผลลัพธ์ (ในกรณีที่อักขระใด ๆ ไม่แสดงผลในระบบของคุณyourStringด้านล่างประกอบด้วยตัวอักษรAพร้อมสำเนียงเฉียบพลันตามด้วยธงสหราชอาณาจักรตามด้วยหญิงผิวดำ)

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

หากเราต้องการให้แต่ละรายการเหล่านี้เป็นรายการเดียวในอาเรย์สุดท้ายของเราจากนั้นเราต้องการอาเรย์ของแบบกราฟิกไม่ใช่รหัสจุด

แยกเป็นกราฟิค

JavaScript ไม่มีการสนับสนุนในตัวสำหรับสิ่งนี้ - อย่างน้อยยังไม่ ดังนั้นเราจำเป็นต้องมีห้องสมุดที่เข้าใจและนำกฎ Unicode มาใช้สำหรับการรวมจุดรหัสใด ๆ เข้าด้วยกันเป็นกราฟ โชคดีที่มีอยู่: orling ของอักษร-แยก คุณจะต้องการติดตั้งด้วย 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);