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:

…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 with these solutions…

🔥 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:

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

ES6 to the rescue!

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

Here are 4 ways to correctly get all characters in a string:

Array.from()

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

Spread operator

The shortest way to do get an array from a string, but sacrifices readability.

For…of loop

The most versatile and performant of the bunch.

RegExp unicode flag

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

Browser support

All of the above are ES6 features, which at this time 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.

--

--

--

I write about web development tips & news. Follow me on twitter for more: twitter.com/HadrysMateusz

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Finally! PVS-Studio Supports .NET 5 Projects

What is GraphQl?

Intro to Transferring Files Between AWS S3 and GCS

A new way mobile banking apps are used to fraud

Can you Build a CPU?

The Journey

HUAWEI ACCOUNT KIT AND FEATURES:-

Apache Kafka: Quick Start

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mateusz Hadryś

Mateusz Hadryś

I write about web development tips & news. Follow me on twitter for more: twitter.com/HadrysMateusz

More from Medium

Printing numbers line by line with a breakpoint.

Several Ways of Pagination in Javascript for Beginners

How does JavaScript event loop work? Explain in a simple way.

Mutability & Reassignment in JavaScript