DEV Community

How to Reverse string in JavaScript

Uyai-Abasi on March 27, 2023

Hello and welcome to my first article! As a tech newbie myself, I understand how daunting it can be to dive into the world of technology. But fear ...

Read full post

Hakki • Mar 28 '23 • Edited

Using split('') might not work well with Unicode characters, especially with characters outside the Basic Multilingual Plane (BMP). To properly handle Unicode characters, you can use the Array.from() method to create an array of characters while preserving the Unicode characters.

function reverseString(str) { return Array.from(str).reverse().join(''); }

peerreynders • Mar 28 '23

It returns an iterator that yields the Unicode code points of the string value as individual strings.

To reverse a unicode string you need an iterator over the grapheme clusters.

String.prototype[@@iterator]() - JavaScript | MDN

The @@iterator method of a string implements the iterable protocol and allows strings to be consumed by most syntaxes expecting iterables, such as the spread syntax and for...of loops. It returns an iterator that yields the Unicode code points of the string value as individual strings.

developer.mozilla.org

Jon Randy 🎖️ • Mar 27 '23

Using :str.split('') does not work at all well with Unicode characters. [...str] is much better, but still not perfect.

peerreynders • Mar 27 '23 • Edited

import ReverseString from "./reverse-string"

// …

it('emoji grapheme clusters', () => {
    // multi-codepoint grapheme clusters
    const emojis =   [
      '\uD83C\uDF37',
      '\uD83C\uDF81',
      '\uD83D\uDCA9',
      '\uD83D\uDE1C',
      '\uD83D\uDC4D',
      '\uD83C\uDFF3\uFE0F\u200d\uD83C\uDF08'
    ];
    const input = emojis.join('');
    const expected = emojis.reverse().join('');
    expect(ReverseString.reverse(input)).toEqual(expected);
  })

grapheme-splitter

Intl.Segmenter - JavaScript | MDN

The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items (graphemes, words or sentences) from a string.

developer.mozilla.org