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 ...
Collapse
 
hakki profile image
Hakki • 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('');
}

Collapse
 
peerreynders profile image
peerreynders

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.

favicon developer.mozilla.org
Collapse
 
jonrandy profile image
Jon Randy 🎖️

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

Collapse
 
peerreynders profile image
peerreynders • 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);
  })
Enter fullscreen mode Exit fullscreen mode

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.

favicon developer.mozilla.org

String - JavaScript | MDN

The String object is used to represent and manipulate a sequence of characters.

favicon developer.mozilla.org
Collapse
 
jonrandy profile image
Jon Randy 🎖️

Yup, I was too tired to go into these last night 👍

Collapse
 
polaroidkidd profile image
Daniel Einars

Awesome API! Shame it's missing in FF

Thread Thread
 
peerreynders profile image
peerreynders

It only became part of the Internationalization API Specification (ECMA 402) with ES2022.

bugzilla.mozilla.org/show_bug.cgi?...

Collapse
 
przemyslawjanbeigert profile image
Przemyslaw Jan Beigert

write your snippet like "

javascript" instead of just "

". It's hard to read without syntax colors.

Collapse
 
usenmfon_uko profile image
Usenmfon

This is awesome!

Collapse
 
hethinksthrice profile image
ATLIEN.

Thank you.

Collapse
 
justin__mark profile image
Justin

Super helpful!