在JavaScript中反轉字符串的三種方法

This article is based on Free Code Camp Basic Algorithm Scripting “Reverse a String”

本文基于Free Code Camp基本算法腳本“ Reverse a String ”

Reversing a string is one of the most frequently asked JavaScript question in the technical round of interview. Interviewers may ask you to write different ways to reverse a string, or they may ask you to reverse a string without using in-built methods, or they may even ask you to reverse a string using recursion.

反轉字符串是技術面試中最常問到JavaScript問題之一。采訪者可能會要求您編寫不同的方式來反轉字符串，或者他們可能會要求您不使用內置方法來反轉字符串，甚至會要求您使用遞歸來反轉字符串。

There are potentially tens of different ways to do it, excluding the built-in reverse function, as JavaScript does not have one.

可能有數十種不同的方法可以執行此操作，但內置的反向功能除外，因為JavaScript沒有。

Below are my three most interesting ways to solve the problem of reversing a string in JavaScript.

以下是我解決JavaScript中的字符串反轉問題的三種最有趣的方法。

算法挑戰 (Algorithm Challenge)

Reverse the provided string.
反轉提供的字符串。

Reverse the provided string.You may need to turn the string into an array before you can reverse it.
反轉提供的字符串。 您可能需要將字符串轉換為數組，然后才能將其反轉。

Reverse the provided string.You may need to turn the string into an array before you can reverse it.Your result must be a string.
反轉提供的字符串。 您可能需要將字符串轉換為數組，然后才能將其反轉。 您的結果必須是字符串。

function reverseString(str) {return str;
}
reverseString("hello");

提供的測試用例 (Provided test cases)

reverseString(“hello”) should become “olleh”
reverseString(“ hello”)應該變成“ olleh”
reverseString(“Howdy”) should become “ydwoH”
reverseString(“ Howdy”)應該變成“ ydwoH”
reverseString(“Greetings from Earth”) should return”htraE morf sgniteerG”
reverseString(“來自地球的問候”)應該返回“ htraE morf sgniteerG”

1.使用內置函數反轉字符串 (1. Reverse a String With Built-In Functions)

For this solution, we will use three methods: the String.prototype.split() method, the Array.prototype.reverse() method and the Array.prototype.join() method.

對于此解決方案，我們將使用三種方法：String.prototype.split()方法，Array.prototype.reverse()方法和Array.prototype.join()方法。

The split() method splits a String object into an array of string by separating the string into sub strings.
split()方法通過將字符串對象拆分為子字符串，將String對象拆分為字符串數組。
The reverse() method reverses an array in place. The first array element becomes the last and the last becomes the first.
reverse()方法將數組反轉到位。第一個數組元素變為最后一個，最后一個數組變為第一個。
The join() method joins all elements of an array into a string.
join()方法將數組的所有元素連接到字符串中。

function reverseString(str) {// Step 1. Use the split() method to return a new arrayvar splitString = str.split(""); // var splitString = "hello".split("");// ["h", "e", "l", "l", "o"]// Step 2. Use the reverse() method to reverse the new created arrayvar reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse();// ["o", "l", "l", "e", "h"]// Step 3. Use the join() method to join all elements of the array into a stringvar joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join("");// "olleh"//Step 4. Return the reversed stringreturn joinArray; // "olleh"
}reverseString("hello");

將這三種方法鏈接在一起： (Chaining the three methods together:)

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

2.用遞減的For循環反轉字符串 (2. Reverse a String With a Decrementing For Loop)

function reverseString(str) {// Step 1. Create an empty string that will host the new created stringvar newString = "";// Step 2. Create the FOR loop/* The starting point of the loop will be (str.length - 1) which corresponds to the last character of the string, "o"As long as i is greater than or equals 0, the loop will go onWe decrement i after each iteration */for (var i = str.length - 1; i >= 0; i--) { newString += str[i]; // or newString = newString + str[i];}/* Here hello's length equals 5For each iteration: i = str.length - 1 and newString = newString + str[i]First iteration:    i = 5 - 1 = 4,         newString = "" + "o" = "o"Second iteration:   i = 4 - 1 = 3,         newString = "o" + "l" = "ol"Third iteration:    i = 3 - 1 = 2,         newString = "ol" + "l" = "oll"Fourth iteration:   i = 2 - 1 = 1,         newString = "oll" + "e" = "olle"Fifth iteration:    i = 1 - 1 = 0,         newString = "olle" + "h" = "olleh"End of the FOR Loop*/// Step 3. Return the reversed stringreturn newString; // "olleh"
}reverseString('hello');

沒有評論： (Without comments:)

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

3.使用遞歸反轉字符串 (3. Reverse a String With Recursion)

For this solution, we will use two methods: the String.prototype.substr() method and the String.prototype.charAt() method.

對于此解決方案，我們將使用兩種方法：String.prototype.substr()方法和String.prototype.charAt()方法。

The substr() method returns the characters in a string beginning at the specified location through the specified number of characters.
substr()方法以指定的字符數返回從指定位置開始的字符串中的字符。

"hello".substr(1); // "ello"

The charAt() method returns the specified character from a string.
charAt()方法從字符串中返回指定的字符。

"hello".charAt(0); // "h"

The depth of the recursion is equal to the length of the String. This solution is not the best one and will be really slow if the String is very long and the stack size is of major concern.

遞歸的深度等于String的長度。如果String非常長且堆棧大小是主要問題，則此解決方案不是最佳解決方案，并且會非常慢。

function reverseString(str) {if (str === "") // This is the terminal case that will end the recursionreturn "";elsereturn reverseString(str.substr(1)) + str.charAt(0);
/* 
First Part of the recursion method
You need to remember that you won’t have just one call, you’ll have several nested callsEach call: str === "?"        	                  reverseString(str.subst(1))     + str.charAt(0)
1st call – reverseString("Hello")   will return   reverseString("ello")           + "h"
2nd call – reverseString("ello")    will return   reverseString("llo")            + "e"
3rd call – reverseString("llo")     will return   reverseString("lo")             + "l"
4th call – reverseString("lo")      will return   reverseString("o")              + "l"
5th call – reverseString("o")       will return   reverseString("")               + "o"Second part of the recursion method
The method hits the if condition and the most highly nested call returns immediately5th call will return reverseString("") + "o" = "o"
4th call will return reverseString("o") + "l" = "o" + "l"
3rd call will return reverseString("lo") + "l" = "o" + "l" + "l"
2nd call will return reverserString("llo") + "e" = "o" + "l" + "l" + "e"
1st call will return reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h" 
*/
}
reverseString("hello");

沒有評論： (Without comments:)

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

條件(三元)運算符： (Conditional (Ternary) Operator:)

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

Reversing a String in JavaScript is a small and simple algorithm that can be asked on a technical phone screening or a technical interview. You could take the short route in solving this problem, or take the approach by solving it with recursion or even more complex solutions.

在JavaScript中反轉字符串是一種小型且簡單的算法，可以在電話技術篩選或技術面試中詢問。您可以采用短路徑解決此問題，也可以采用遞歸或更復雜的解決方案來解決。

I hope you found this helpful. This is part of my “How to Solve FCC Algorithms” series of articles on the Free Code Camp Algorithm Challenges, where I propose several solutions and explain step-by-step what happens under the hood.

希望對您有所幫助。這是我的“如何解決FCC算法”系列文章的一部分，有關自由代碼訓練營算法挑戰，我在其中提出了幾種解決方案并逐步解釋了幕后情況。

Three ways to repeat a string in JavaScriptIn this article, I’ll explain how to solve freeCodeCamp’s “Repeat a string repeat a string” challenge. This involves…

在JavaScript中重復字符串的三種方法 在本文中，我將解釋如何解決freeCodeCamp的“重復字符串重復字符串”挑戰。 這涉及…

Two ways to confirm the ending of a String in JavaScriptIn this article, I’ll explain how to solve freeCodeCamp’s “Confirm the Ending” challenge.

在JavaScript中確認字符串結尾的兩種方法 在本文中，我將解釋如何解決freeCodeCamp的“確認結尾”挑戰。

Three Ways to Factorialize a Number in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Factorialize a Number”

在JavaScript中分解數字的三種方法 本文基于Free Code Camp基本算法腳本“簡化數字”

Two Ways to Check for Palindromes in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Check for Palindromes”.

用JavaScript檢查回文的兩種方法 本文基于Free Code Camp基本算法腳本“檢查回文”。

Three Ways to Find the Longest Word in a String in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Find the Longest Word in a String”.

在JavaScript中查找字符串中最長單詞的三種方法 本文基于Free Code Camp基本算法腳本“查找字符串中最長單詞”。

Three Ways to Title Case a Sentence in JavaScriptThis article is based on Free Code Camp Basic Algorithm Scripting “Title Case a Sentence”.

用JavaScript給句子加標題的三種方法 本文基于Free Code Camp基本算法腳本“標題加句子”。

If you have your own solution or any suggestions, share them below in the comments.

如果您有自己的解決方案或任何建議，請在下面的評論中分享。

Or you can follow me on Medium, Twitter, Github and LinkedIn, right after you click the green heart below ;-)

或者，您也可以在單擊下面的綠色心臟之后立即在Medium ， Twitter ， Github和LinkedIn上關注我；-)

?#?StayCurious?, ?#?KeepOnHacking? & ?#?MakeItHappen?!

?＃StayCurious?，?＃KeepOnHacking?和?＃MakeItHappen?！