How do you get a string to a character array in JavaScript?

How do you convert a string to a character array in JavaScript?

I'm thinking getting a string like "Hello world!" to the array
['H','e','l','l','o',' ','w','o','r','l','d','!']

Answers:

Answer

The spread Syntax

You can use the spread syntax, an Array Initializer introduced in ECMAScript 2015 (ES6) standard:

var arr = [...str];

Examples

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

The first three result in:

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

The last one results in

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

Browser Support

Check the ECMAScript ES6 compatibility table.


Further reading

spread is also referenced as "splat" (e.g. in PHP or Ruby or as "scatter" (e.g. in Python).


Demo

Try before buy

Answer

You can also use Array.from.

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

This method has been introduced in ES6.

Reference

Array.from

Answer

It already is:

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

Or for a more older browser friendly version, use:

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

Answer

You can iterate over the length of the string and push the character at each position:

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

Answer

simple answer:

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

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

Answer

Note: This is not unicode compliant. "I????U".split('') results in the 4 character array ["I", "?", "?", "u"] which can lead to dangerous bugs. See answers below for safe alternatives.

Just split it by an empty string.

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

See the String.prototype.split() MDN docs.

Answer

As hippietrail suggests, meder's answer can break surrogate pairs and misinterpret “characters.” For example:

// DO NOT USE THIS!
> '????????????????'.split('')
[ '?', '?', '?', '?', '?', '?', '?', '?' ]

I suggest using one of the following ES2015 features to correctly handle these character sequences.

Spread syntax (already answered by insertusernamehere)

> [...'????????????????']
[ '????', '????', '????', '????' ]

Array.from

> Array.from('????????????????')
[ '????', '????', '????', '????' ]

RegExp u flag

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

Use /(?=[\s\S])/u instead of /(?=.)/u because . does not match newlines.

If you are still in ES5.1 era (or if your browser doesn't handle this regex correctly - like Edge), you can use this alternative (transpiled by Babel):

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

Note, that Babel tries to also handle unmatched surrogates correctly. However, this doesn't seem to work for unmatched low surrogates.

Test all in your browser:

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>

Answer

This is an old question but I came across another solution not yet listed.

You can use the Object.assign function to get the desired output:

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

Not necessarily right or wrong, just another option.

Object.assign is described well at the MDN site.

Answer

There are (at least) three different things you might conceive of as a "character", and consequently, three different categories of approach you might want to use.

Splitting into UTF-16 code units

JavaScript strings were originally invented as sequences of UTF-16 code units, back at a point in history when there was a one-to-one relationship between UTF-16 code units and Unicode code points. The .length property of a string measures its length in UTF-16 code units, and when you do someString[i] you get the ith UTF-16 code unit of someString.

Consequently, you can get an array of UTF-16 code units from a string by using a C-style for-loop with an index variable...

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

There are also various short ways to achieve the same thing, like using .split() with the empty string as a separator:

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

However, if your string contains code points that are made up of multiple UTF-16 code units, this will split them into individual code units, which may not be what you want. For instance, the string '????????????????' is made up of four unicode code points (code points 0x1D7D8 through 0x1D7DB) which, in UTF-16, are each made up of two UTF-16 code units. If we split that string using the methods above, we'll get an array of eight code units:

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

Splitting into Unicode Code Points

So, perhaps we want to instead split our string into Unicode Code Points! That's been possible since ECMAScript 2015 added the concept of an iterable to the language. Strings are now iterables, and when you iterate over them (e.g. with a for...of loop), you get Unicode code points, not UTF-16 code units:

const yourString = '????????????????';
const charArray = [];
for (const char of yourString) {
  charArray.push(char);
}
console.log(charArray);

We can shorten this using Array.from, which iterates over the iterable it's passed implicitly:

const yourString = '????????????????';
const charArray = Array.from(yourString);
console.log(charArray);

However, unicode code points are not the largest possible thing that could possibly be considered a "character" either. Some examples of things that could reasonably be considered a single "character" but be made up of multiple code points include:

  • Accented characters, if the accent is applied with a combining code point
  • Flags
  • Some emojis

We can see below that if we try to convert a string with such characters into an array via the iteration mechanism above, the characters end up broken up in the resulting array. (In case any of the characters don't render on your system, yourString below consists of a capital A with an acute accent, followed by the flag of the United Kingdom, followed by a black woman.)

const yourString = 'A?????????????????';
const charArray = Array.from(yourString);
console.log(charArray);

If we want to keep each of these as a single item in our final array, then we need an array of graphemes, not code points.

Splitting into graphemes

JavaScript has no built-in support for this - at least not yet. So we need a library that understands and implements the Unicode rules for what combination of code points constitute a grapheme. Fortunately, one exists: orling's grapheme-splitter. You'll want to install it with npm or, if you're not using npm, download the index.js file and serve it with a <script> tag. For this demo, I'll load it from jsDelivr.

grapheme-splitter gives us a GraphemeSplitter class with three methods: splitGraphemes, iterateGraphemes, and countGraphemes. Naturally, we want splitGraphemes:

const splitter = new GraphemeSplitter();
const yourString = 'A?????????????????';
const charArray = splitter.splitGraphemes(yourString);
console.log(charArray);
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>

And there we are - an array of three graphemes, which is probably what you wanted.

Answer

One possibility is the next:

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

How about this?

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

Array.prototype.slice will do the work as well.

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

Answer

The ES6 way to split a string into an array character-wise is by using the spread operator. It is simple and nice.

array = [...myString];

Example:

let myString = "Hello world!"
array = [...myString];
console.log(array);

// another example:

console.log([..."another splitted text"]);

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.