JavaScript | Как перевернуть строку?

Как записать строку в обратном порядке силами JavaScript?

В этой публикации приведены три способа переворота строки в обратном порядке, где первая буква становится последней, а последняя — первой.

Способ № 1 — Функция переворачивания строки через литерал массива, оператор spread, метод revese() и метод join()

function reverseStr(str){
   return [...str].reverse().join("")
}

Логика работы функции

Есть строка:

var stroka = 'tpircSavaJ'

Все строки в JavaScript являются итерируемыми объектами, а значит могут быть приведены к массиву. Воспользуемся оператором троеточия.

var massiv = [...stroka]

Теперь в переменной massiv находится массив из символов строки.

Получили массив из строки - JavaScript — Получили массив из строки — JavaScript

Его последовательность элементов совпадает с последовательностью символов в строке. Сейчас мы можем воспользоваться методом reverse() и перевернуть массив.

massiv.reverse()

Теперь элементы отзеркалились — последний стал первым.

Перевернули массив из букв - JavaScript — Перевернули массив из букв — JavaScript

Чтобы обратно вернуть строку, нам нужно воспользоваться методом join() и передать в качестве разделителя пустую строку. Она пустая потому что мы хотим слепить букву к букве (символ к символу).

massiv.reverse().join("")

Перевернули массив из букв и склеили - JavaScript — Перевернули массив из букв и склеили — JavaScript

В результате мы перевернули строку и получили слово «JavaScript» из слова «tpircSavaJ»

Собственный метод для объектов-прототипов String

String.prototype.reverseStr = function(){
   return [...this].reverse().join("")
}

Пример работы метода и его вызова:

Собственный метод для переворота строк - JavaScript — Собственный метод для переворота строк — JavaScript

Способ № 2 — через цикл for

У всех строк есть свойство длины — «length«. Мы можем перевернуть строку при помощи самописной функции и цикла for:

function reverseStr(str){
   var a = "";
   for (i = 0; i < str.length; i++){
      a += str[(str.length - 1) - i];
   }
   return a;
}

Результат работы:

Переворот строки циклом for - JavaScript — Переворот строки циклом for — JavaScript

Собственный метод для объектов-прототипов String

String.prototype.reverseStr = function(){
   var a = ""; 
   for (i = 0; i < this.length; i++){ 
      a += this[(this.length - 1) - i]; 
   } 
   return a;
}

Пример работы метода и его вызова:

Расширили методы для строк - перевернули строку циклом for - JavaScript — Расширили методы для строк — перевернули строку циклом for — JavaScript

Способ № 3 — через метод [@@match] для экземпляров регулярных выражений

Выражение переворота будет выглядеть так:

/./g[Symbol.match]("Какая-то строка").reverse().join("")

Мы используем регулярное выражение с глобальных флагом для полного сопоставления строки слева направо от начала и до конца. Шаблон регулярного выражения оформлен в синтаксисе Атома, который оформлен точкой. Точка обозначает один любой символ.

К методу [@@match] мы можем обратиться только по имени [Symbol.match]. Обратите внимание, что вызов этого метода НЕ СОПРОВОЖДАЕТСЯ ТОЧКОЙ!!!

Работа метода сопоставления строки возвращает нам массив, а дальше действия как в первом примере — это методы .reverse() и .join(«»).

Результат работы:

Перевернули строку через регулярное выражение - JavaScript — Перевернули строку через регулярное выражение — JavaScript

Зачем переворачивать строку?

В некоторых ситуациях нужно поменять направление сопоставления строк при помощи регулярных выражений. По умолчанию это сопоставление производится слева-направо.

После переворота строки первые сопоставления по сути будут являться последними сопоставлениями.

Информационные ссылки

JavaScript | Строки (String)

Стандарт ECMAScript — Раздел «22.1 String Objects» — https://tc39.es/ecma262/#sec-string-objects

Стандарт ECMAScript — Раздел «14.7.4 The for Statement» — https://tc39.es/ecma262/#sec-for-statement

Стандарт ECMAScript — Раздел «22.2.5.7 RegExp.prototype [ @@match ] ( string )» — https://tc39.es/ecma262/#sec-regexp.prototype-@@match