DEV Community

Cover image for 4 Ways to Get All Characters in a String in JavaScript
Mateusz Hadryś
Mateusz Hadryś

Posted on • Updated on • Originally published at hadrysmateusz.com

4 Ways to Get All Characters in a String in JavaScript

How to get all characters in a string?

This question might sound simple at first, but in JavaScript nothing is ever what it seems.

If you google "How to get all characters in a string" or "How to get an array of characters from string", you will most likely find something like:

var chars = "Some string".split("")

// or...

var str = "Some string"
for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i))
}
Enter fullscreen mode Exit fullscreen mode

...and people arguing if you should use str.charAt() or the bracket notation.

However, these answers are usually pretty old and don't take into account one important issue...

Emoji 🔥☠️

Or more generally: surrogate pairs. Most characters in javascript are encoded using 2 bytes, but that’s not enough to encode every symbol. To deal with this problem, emoji and some other rare symbols are encoded with a pair of 2-byte characters — a surrogate pair.

Surrogate pairs didn’t exist when JavaScript was created, so some parts of the language still treat these symbols like 2 separate characters. You can copy this snippet into your browser console to see for yourself:

"💩".length
// returns 2
Enter fullscreen mode Exit fullscreen mode

This can make the above methods sometimes return incorrect results, like this:

"💩".split("") // returns ["�", "�"]
Enter fullscreen mode Exit fullscreen mode

ES6 to the rescue!

ES6 introduced the concept of iterators and along with it, a solution to the surrogate pairs problem.

Array.from()

The simplest way to create an array from any iterable, including strings.

const str = "✨𝄞💩"
const chars = Array.from(str)
// chars is now: ["✨","𝄞","💩"]
Enter fullscreen mode Exit fullscreen mode

Spread operator

The shortest way to do it, but sacrificing readability.

const str = "✨𝄞💩"
const chars = [...str]
// chars is now: ["✨","𝄞","💩"]
Enter fullscreen mode Exit fullscreen mode

For...of loop

The most versatile and performant of the bunch.

const str = "✨𝄞💩"
for (let char of str) {
  console.log(char)
}
// Logs to the console:
// "✨"
// "𝄞"
// "💩"
Enter fullscreen mode Exit fullscreen mode

RegExp unicode flag

If you're feeling fancy you can also use a regular expression with the unicode flag.

const str = "✨𝄞💩"
const chars = str.match(/./gu)
// chars is now: ["✨","𝄞","💩"]
Enter fullscreen mode Exit fullscreen mode

Browser support

All of the above are ES6 features, which at this point, is supported pretty much everywhere, with the exception of internet explorer. If you need to support internet explorer you should transpile your code with a tool like Babel. Or just use one of the old methods, but be aware of their limitations.


Thanks for reading.

If you know other clever ways to turn strings into character arrays, let me know in the comments, I always like learning new things.

Other articles you might enjoy

Top comments (2)

Collapse
 
brewinstallbuzzwords profile image
Adam Davis

Thanks for sharing! This was causing problems for me recently

Collapse
 
hadrysmateusz profile image
Mateusz Hadryś

Yeah, this bit me in the ass in the past too. Glad I could help :)