在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‬！