Làm thế nào để bạn có được một chuỗi đến một mảng ký tự trong JavaScript?

Làm thế nào để bạn chuyển đổi một chuỗi thành một mảng ký tự trong JavaScript?

Tôi nghĩ rằng có được một chuỗi như "Hello world!"mảng
['H','e','l','l','o',' ','w','o','r','l','d','!']

Lưu ý: Đây không phải là tuân thủ unicode. dẫn đến "I💖U".split('')mảng 4 ký tự ["I", "�", "�", "u"]có thể dẫn đến các lỗi nguy hiểm. Xem câu trả lời dưới đây để thay thế an toàn.

Chỉ cần tách nó bằng một chuỗi rỗng.

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

Xem String.prototype.split()tài liệu MDN .

Như hà mã gợi ý , câu trả lời của người trung gian có thể phá vỡ các cặp thay thế và giải thích sai các ký tự. Ví dụ:

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

Tôi đề nghị sử dụng một trong các tính năng ES2015 sau đây để xử lý chính xác các chuỗi ký tự này.

Cú pháp lây lan ( đã được trả lời bởi insertusernamehere)

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

Array.from

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

uCờ RegExp

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

Sử dụng /(?=[\s\S])/uthay /(?=.)/uvì vì .không phù hợp với dòng mới .

Nếu bạn vẫn ở thời đại ES5.1 (hoặc nếu trình duyệt của bạn không xử lý chính xác biểu thức chính này - như Edge), bạn có thể sử dụng giải pháp thay thế này (được dịch bởi Babel ):

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

Lưu ý rằng Babel cũng cố gắng xử lý chính xác những người thay thế chưa từng có. Tuy nhiên, điều này dường như không hoạt động đối với những người thay thế thấp chưa từng có.

Kiểm tra tất cả trong trình duyệt của bạn:

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>

các spreadcú pháp

Bạn có thể sử dụng cú pháp lây lan , Bộ khởi tạo mảng được giới thiệu trong tiêu chuẩn ECMAScript 2015 (ES6) :

var arr = [...str];

Ví dụ

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

Ba kết quả đầu tiên trong:

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

Kết quả cuối cùng trong

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

Hỗ trợ trình duyệt

Kiểm tra bảng tương thích ECMAScript ES6 .

đọc thêm

• MDN: Toán tử trải rộng
• ECMAScript 2015 (ES6): Bộ khởi tạo mảng 12.2.5

spreadcũng được tham chiếu là " splat" (ví dụ: trong PHP hoặc Ruby hoặc là " scatter" (ví dụ: trong Python ).

Bản giới thiệu

Hãy thử trước khi mua

Bạn cũng có thể sử dụng Array.from.

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

Phương pháp này đã được giới thiệu trong ES6.

Tài liệu tham khảo

Array.from

Đây là một câu hỏi cũ nhưng tôi đã đi qua một giải pháp khác chưa được liệt kê.

Bạn có thể sử dụng hàm Object.assign để có đầu ra mong muốn:

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

Không nhất thiết đúng hay sai, chỉ là một lựa chọn khác.

Object.assign được mô tả tốt tại trang MDN.

Nó đã là:

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

Hoặc đối với phiên bản thân thiện với trình duyệt cũ hơn, hãy sử dụng:

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

Có (ít nhất) ba thứ khác nhau mà bạn có thể nghĩ là "nhân vật", và do đó, ba loại phương pháp khác nhau mà bạn có thể muốn sử dụng.

Chia thành các đơn vị mã UTF-16

Các chuỗi JavaScript ban đầu được phát minh dưới dạng chuỗi các đơn vị mã UTF-16, quay lại một điểm trong lịch sử khi có mối quan hệ một-một giữa các đơn vị mã UTF-16 và các điểm mã Unicode. Các .lengthtài sản của một chuỗi đo chiều dài của nó trong UTF-16 đơn vị mã, và khi bạn làm điều someString[i]bạn nhận được i thứ đơn vị mã UTF-16 someString.

Do đó, bạn có thể nhận được một mảng các đơn vị mã UTF-16 từ một chuỗi bằng cách sử dụng vòng lặp kiểu C với một biến chỉ mục ...

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

Ngoài ra còn có nhiều cách ngắn khác nhau để đạt được điều tương tự, như sử dụng .split()với chuỗi rỗng làm dấu phân cách:

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

Tuy nhiên, nếu chuỗi của bạn chứa các điểm mã được tạo thành từ nhiều đơn vị mã UTF-16, thì chuỗi này sẽ chia chúng thành các đơn vị mã riêng lẻ, có thể không phải là điều bạn muốn. Chẳng hạn, chuỗi '𝟘𝟙𝟚𝟛'được tạo thành từ bốn điểm mã unicode (điểm mã 0x1D7D8 đến 0x1D7DB), trong UTF-16, mỗi điểm được tạo thành từ hai đơn vị mã UTF-16. Nếu chúng ta chia chuỗi đó bằng các phương thức trên, chúng ta sẽ nhận được một mảng gồm tám đơn vị mã:

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

Chia thành các điểm mã Unicode

Vì vậy, có lẽ chúng tôi muốn chia chuỗi của chúng tôi thành Điểm Mã Unicode! Điều đó là có thể kể từ khi ECMAScript 2015 bổ sung khái niệm lặp lại cho ngôn ngữ. Các chuỗi bây giờ là các for...ofvòng lặp và khi bạn lặp lại chúng (ví dụ với một vòng lặp), bạn sẽ nhận được các điểm mã Unicode, không phải các đơn vị mã UTF-16:

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

Chúng ta có thể rút ngắn điều này bằng cách sử dụng Array.from, lặp đi lặp lại qua lần lặp mà nó được thông qua hoàn toàn:

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

Tuy nhiên, điểm mã unicode không phải là điều lớn nhất có thể mà có thể được coi là một "nhân vật" trong hai . Một số ví dụ về những thứ có thể được coi là một "ký tự" hợp lý nhưng được tạo thành từ nhiều điểm mã bao gồm:

• Ký tự có dấu, nếu dấu được áp dụng với điểm mã kết hợp
• Cờ
• Một số biểu tượng cảm xúc

Chúng ta có thể thấy bên dưới rằng nếu chúng ta cố gắng chuyển đổi một chuỗi có các ký tự như vậy thành một mảng thông qua cơ chế lặp ở trên, các ký tự sẽ bị phá vỡ trong mảng kết quả. (Trong trường hợp bất kỳ nhân vật nào không hiển thị trên hệ thống của bạn, yourStringbên dưới bao gồm một chữ A có dấu trọng âm, theo sau là cờ của Vương quốc Anh, theo sau là một phụ nữ da đen.)

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

Nếu chúng ta muốn giữ mỗi thứ này như một mục duy nhất trong mảng cuối cùng của chúng ta, thì chúng ta cần một mảng các biểu đồ , không phải các điểm mã.

Chia thành đồ thị

JavaScript không có hỗ trợ tích hợp cho việc này - ít nhất là chưa. Vì vậy, chúng ta cần một thư viện hiểu và thực hiện các quy tắc Unicode cho sự kết hợp các điểm mã nào tạo thành một biểu đồ. May mắn thay, người ta tồn tại: bộ tách đồ thị của orling . Bạn sẽ muốn cài đặt nó với npm hoặc, nếu bạn không sử dụng npm, hãy tải xuống tệp index.js và cung cấp nó với một <script>thẻ. Đối với bản demo này, tôi sẽ tải nó từ jsDelivr.

grapheme-splitter cho chúng ta một GraphemeSplitterlớp học với ba phương pháp: splitGraphemes, iterateGraphemes, và countGraphemes. Đương nhiên, chúng tôi muốn 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>

Và chúng tôi ở đó - một mảng gồm ba biểu đồ, có lẽ là những gì bạn muốn.

Bạn có thể lặp theo chiều dài của chuỗi và đẩy ký tự ở mỗi vị trí :

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

câu trả lời đơn giản:

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

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

Một khả năng là tiếp theo:

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

Còn cái này thì sao?

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

Array.prototype.slice cũng sẽ làm việc.

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