Оригінальна публікація: Three Ways to Reverse a String in JavaScript

Ця публікація базується на основах написання алгоритмів від freeCodeCamp «Зворотний рядок»

Перевертання рядка є одним із найпоширеніших запитань по JavaScript на співбесіді. Інтерв’юери можуть попросити вас написати різні способи перевернути рядок, іноді без використання вбудованих методів, або навіть за допомогою рекурсії.

Існують десятки різних способів перевернути рядок, за винятком вбудованої функції reverse, оскільки її немає в JavaScript.

Нижче наведено три найцікавіші способи перевертання рядка в JavaScript.

Завдання

Переверніть заданий рядок.
За необхідності перетворіть рядок у масив до того, як вносити зміни.
У результаті ви повинні отримати рядок.
function reverseString(str) {
    return str;
}
reverseString("hello");

Надані випадки

  • reverseString(“hello”) повинен перетворитися на «olleh»
  • reverseString(“Howdy”) повинен перетворитися на «ydwoH»
  • reverseString(“Greetings from Earth”) повинен перетворитися на «htraE morf sgniteerG»

1. Перевертання рядка за допомогою вбудованих функцій

Для цього способу ми будемо використовувати три методи: String.prototype.split(), Array.prototype.reverse() та Array.prototype.join().

  • Метод split() розбиває рядок в масив рядків, поділяючи рядок на підрядки.
  • Метод reverse() повертає масив на місці. Перший елемент масиву стає останнім, а останній — першим.
  • Метод join() об’єднує всі елементи масиву в рядок.
function reverseString(str) {
    // Крок 1. Використайте метод split(), щоб повернути новий масив
    var splitString = str.split(""); // var splitString = "hello".split("");
    // ["h", "e", "l", "l", "o"]
 
    // Крок 2. Використайте метод reverse(), щоб перевернути новий створений масив
    var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse();
    // ["o", "l", "l", "e", "h"]
 
    // Крок 3. Використайте метод join(), щоб об’єднати всі елементи масиву в рядок
    var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join("");
    // "olleh"
    
    //Крок 4. Поверніть перевернутий рядок
    return joinArray; // "olleh"
}
 
reverseString("hello");

Сполучаємо три методи:

function reverseString(str) {
    return str.split("").reverse().join("");
}
reverseString("hello");

2. Перевертання рядка за допомогою циклу for, що зменшується

function reverseString(str) {
    // Крок 1. Створіть порожній рядок, у якому буде розміщено новий створений рядок
    var newString = "";
 
    // Крок 2. Створіть цикл FOR
    /* Початковою точкою циклу буде (str.length - 1), що відповідає 
        останньому символу рядка, "o"
       Поки «i» більше або дорівнює 0, цикл триватиме
       Ми зменшуємо «i» після кожної ітерації */
    for (var i = str.length - 1; i >= 0; i--) { 
        newString += str[i]; // або newString = newString + str[i];
    }
    /* Довжина hello дорівнює 5
        Для кожної ітерації: i = str.length - 1 та newString = newString + str[i]
        Перша ітерація:    i = 5 - 1 = 4,         newString = "" + "o" = "o"
        Друга ітерація:   i = 4 - 1 = 3,         newString = "o" + "l" = "ol"
        Третя ітерація:    i = 3 - 1 = 2,         newString = "ol" + "l" = "oll"
        Четверта ітерація:   i = 2 - 1 = 1,         newString = "oll" + "e" = "olle"
        П'ята ітерація:    i = 1 - 1 = 0,         newString = "olle" + "h" = "olleh"
    Кінець циклу FOR*/
 
    // Крок 3. Поверніть перевернутий рядок
    return newString; // "olleh"
}
 
reverseString('hello');

Без коментарів:

function reverseString(str) {
    var newString = "";
    for (var i = str.length - 1; i >= 0; i--) {
        newString += str[i];
    }
    return newString;
}
reverseString('hello');

3. Перевертання рядка за допомогою рекурсії

Для цього способу ми будемо використовувати два методи: String.prototype.substr() та String.prototype.charAt().

  • Метод substr() повертає символи в рядку, починаючи з вказаного місця, через вказану кількість символів.
"hello".substr(1); // "ello"
  • Метод charAt() повертає вказаний символ із рядка.
"hello".charAt(0); // "h"

Глибина рекурсії дорівнює довжині рядка. Цей метод не найкращий та дуже повільний, якщо рядок довгий і розмір стека викликає серйозне занепокоєння.

function reverseString(str) {
  if (str === "") // Це кінцевий випадок, який закінчить рекурсію
    return "";
  
  else
    return reverseString(str.substr(1)) + str.charAt(0);
/* 
Перша частина методу рекурсії
Потрібно пам’ятати, що у вас буде не один, а декілька вкладених викликів

Кожен виклик: str === "?"        	                  reverseString(str.subst(1))     + str.charAt(0)
1-ий виклик – reverseString("Hello")   поверне   reverseString("ello")           + "h"
2-ий виклик – reverseString("ello")    поверне   reverseString("llo")            + "e"
3-ій виклик – reverseString("llo")     поверне   reverseString("lo")             + "l"
4-ий виклик – reverseString("lo")      поверне   reverseString("o")              + "l"
5-ий виклик – reverseString("o")       поверне   reverseString("")               + "o"

Друга частина методу рекурсії
Метод потрапляє в умову if (якщо), і виклик з найбільшим вкладенням повертається негайно

5-ий виклик поверне reverseString("") + "o" = "o"
4-ий виклик поверне reverseString("o") + "l" = "o" + "l"
3-ій виклик поверне reverseString("lo") + "l" = "o" + "l" + "l"
2-ий виклик поверне reverserString("llo") + "e" = "o" + "l" + "l" + "e"
1-ий виклик поверне reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h" 
*/
}
reverseString("hello");

Без коментарів:

function reverseString(str) {
  if (str === "")
    return "";
  else
    return reverseString(str.substr(1)) + str.charAt(0);
}
reverseString("hello");

Умовний (тернарний) оператор:

function reverseString(str) {
  return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);
}
reverseString("hello");

Перевертання рядка в JavaScript — це невеликий та простий алгоритм, який можуть запитати під час співбесіди. Ви можете вибрати короткий шлях у розв’язанні цієї проблеми або розв’язати її за допомогою рекурсії чи інших складніших рішень.

Сподіваюся, ви знайшли це корисним. Це частина моєї серії публікацій «Як розв’язувати алгоритми fCC», що стосується завдань по алгоритмах від freeCodeCamp, де я пропоную декілька розв’язків та покроково пояснюю, що може здатись неочевидним.

Ви можете слідкувати за мною на Medium, Twitter, Github та LinkedIn