字符串反转方法汇总

Posted 2020-07-08 ╭ 儛動嘚靈魂

• split()方法将一个字符串对象的每个字符拆出来，并且将每个字符串当成数组的每个元素
• reverse()方法用来改变数组，将数组中的元素倒个序排列，第一个数组元素成为最后一个，最后一个变成第一个
• join()方法将数组中的所有元素边接成一个字符串

来看个实例：

 1 function reverseString(str) {
 2     // 第一步，使用split()方法，返回一个新数组
 3     // var splitString = "hello".split("");
 4 
 5     var splitString = str.split(""); //将字符串拆分
 6 
 7     // 返回一个新数组["h", "e", "l", "l", "o"]
 8 
 9     // 第二步，使用reverse()方法创建一个新数组
10     // var reverseArray = ["h", "e", "l", "l", "o"].reverse();
11 
12     var reverseArray = splitString.reverse(); 
13     // 原数组元素顺序反转["o", "l", "l", "e", "h"]
14 
15     // 第三步，使用join()方法将数组的每个元素连接在一起，组合成一个新字符串
16     // var joinArray = ["o", "l", "l", "e", "h"].join("");
17 
18     var joinArray = reverseArray.join(""); 
19     // "olleh"
20 
21     // 第四步，返回一个反转的新字符串
22     return joinArray; // "olleh"
23 }
24 
25 reverseString("hello"); // => olleh

将上面的方法简化一下，可以写成这样：

1 function reverseString(str) {
2     return str.split("").reverse().join("");
3 }
4 reverseString("hello"); // => olleh

使用一个递减循环遍历将字符串反转

这种方法使用的是一个for循环给原字符串做一个递减遍历，然后将遍历的字符串重新合并成一个新字符串：

 1 function reverseString(str) {
 2     // 第一步：创建一个空的字符串用来存储新创建的字符串
 3 
 4     var newString = "";
 5 
 6     // 第二步：使用for循环
 7     // 循环从str.length-1开始做递减遍历,直到 i 大于或等于0，循环将继续
 8     // str.length - 1对应的就是字符串最后一个字符o
 9 
10     for (var i = str.length - 1; i >= 0; i--) { 
11         newString += str[i]; // 或者 newString = newString + str[i];
12     }
13 
14     // 第三步：返回反转的字符串
15     return newString; 
16 }
17 
18 reverseString(‘hello‘); // => // "olleh"

简单的看看字符串遍历的过程。假设需要将字符串"hello"反转。其整个遍历过程如下表所示：

迭代顺序	对应i的值	新字符串 newString
每次迭代	str.length - 1	newString + str[i]
第一次迭代	5 - 1 = 4	"" + "o" = "o"
第二次迭代	4 - 1 = 3	"o" + "l" = "ol"
第三次迭代	3 - 1 = 2	"ol" + "l" = "oll"
第四次迭代	2 - 1 = 1	"oll" + "e" = "olle"
第五次迭代	1 - 1 = 0	"olle" + "h" = "olleh"

其实上面的for循环，也可以换成while循环：

 1 function reverseString (str) {
 2     var newString = ‘‘;
 3     var i = str.length;
 4 
 5     while (i > 0) {
 6         newString += str.substring(i - 1, i);
 7         i--;
 8     }
 9 
10     return newString;
11 }
12 
13 reverseString("hello"); // => olleh

在while循环中substring()方法。substring() 返回字符串两个索引之间（或到字符串末尾）的子串。

使用递归实现字符串反向

使用String.prototype.substr()和String.prototype.charAt()方法也可以将一个字符串反向。

substr() 方法返回字符串中从指定位置开始到指定长度的子字符串。比如：

1 var str = "abcdefghij";
2 
3 console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
4 console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
5 console.log("(-3): "     + str.substr(-3));    // (-3): hij
6 console.log("(1): "      + str.substr(1));     // (1): bcdefghij
7 console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
8 console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):

charAt() 方法返回字符串中指定位置的字符。字符串中的字符从左向右索引，第一个字符的索引值为 0，最后一个字符（假设该字符位于字符串 stringName 中）的索引值为 stringName.length - 1。 如果指定的 index 值超出了该范围，则返回一个空字符串。

1 var anyString = "Brave new world";
2 console.log("The character at index 0   is ‘" + anyString.charAt(0)   + "‘"); // =>The character at index 0 is ‘B‘
3 console.log("The character at index 1   is ‘" + anyString.charAt(1)   + "‘"); // =>The character at index 1 is ‘r‘
4 console.log("The character at index 2   is ‘" + anyString.charAt(2)   + "‘"); // =>The character at index 2 is ‘a‘
5 console.log("The character at index 3   is ‘" + anyString.charAt(3)   + "‘"); // => The character at index 3 is ‘v‘
6 console.log("The character at index 4   is ‘" + anyString.charAt(4)   + "‘"); // => The character at index 4 is ‘e‘
7 console.log("The character at index 999 is ‘" + anyString.charAt(999) + "‘"); // => The character at index 999 is ‘‘

结合起来，我们可以这样做实现字符串反向：

1 function reverseString(str) {
2     if (str === "") {
3         return "";
4     } else {
5         return reverseString(str.substr(1)) + str.charAt(0);
6     }
7 }
8 reverseString("hello"); // => olleh

第一部分的递归方法。你需要记住，你不会只调用一次，你将会有几个嵌套的调用。

每次调用str === "?"	reverseString(str.subst(1))	+ str.charAt(0)
第一次调用	reverseString("Hello")	reverseString("ello") + "h"
第二次调用	reverseString("ello")	reverseString("llo") + "e"
第三次调用	reverseString("llo")	reverseString("lo") + "l"
第四次调用	reverseString("lo")	reverseString("o") + "l"
第五次调用	reverseString("o")	reverseString("") + "o"

第二部分的递归方法。

每次调用	返回
第五次调用	reverseString("") + "o" = "o"
第四次调用	reverseString("o") + "l" = "o" + "l"
第三次调用	reverseString("lo") + "l" = "o" + "l" + "l"
第二次调用	reverserString("llo") + "e" = "o" + "l" + "l" + "e"
第一次调用	reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h"

上面的方法还可以继续改良一下，改成三元操作符：

1 function reverseString(str) {
2     return (str === ‘‘) ? ‘‘ : reverseString(str.substr(1)) + str.charAt(0);
3 }
4 reverseString("hello"); // => olleh

　　还可以换成这样的方式

1 function reverseString(str) {
2   return str && reverseString(str.substr(1)) + str[0];
3 }
4 reverseString("hello"); // => olleh

除了上面的方法之外，其实还有其他一些方法：

方法一

1 function reverseString (str) {
2     var newString = [];
3     for (var i = str.length - 1, j = 0; i >= 0; i--, j++) {
4         newString[j] = str[i];
5     }
6     return newString.join(‘‘);
7 }
8 
9 reverseString("hello"); // => olleh

方法二

1 function reverseString (str) {
2     for (var i = str.length - 1, newString = ‘‘; i >= 0; newString += str[i--] ) {
3 
4     }
5     return newString;
6 }
7 
8 reverseString("hello"); // => olleh

 

方法三

1 function reverseString (str) {
2     function rev(str, len, newString) {
3         return (len === 0) ? newString : rev(str, --len, (newString += str[len]));
4     }
5     return rev(str, str.length, ‘‘);
6 }
7 reverseString("hello"); // =>olleh

 

方法四

 1 function reverseString (str) {
 2     str = str.split(‘‘);
 3     var len = str.length,
 4         halfIndex = Math.floor(len / 2) - 1,
 5         newString;
 6     for (var i = 0; i <= halfIndex; i++) {
 7         newString = str[len - i - 1];
 8         str[len - i - 1] = str[i];
 9         str[i] = newString;
10     }
11     return str.join(‘‘);
12 }
13 reverseString("hello"); // => olleh

 

方法五

1 function reverseString (str) {
2     if (str.length < 2) {
3         return str;
4     }
5     var halfIndex = Math.ceil(str.length / 2);
6     return reverseString(str.substr(halfIndex)) + reverseString(str.substr(0, halfIndex));
7 }
8 
9 reverseString("hello"); // =>olleh

 

方法六

1 function reverseString(str) {
2   return [].reduceRight.call(str, function(prev, curr) {
3     return prev + curr;
4   }, ‘‘);
5 }
6 
7 reverseString("hello"); // =>olleh

ES6的方法

在ES6中，可以变得更为简单一些，如：

1 [...str].reverse().join(‘‘);

或者:

1 [...str].reduceRight( (prev, curr) => prev + curr );

或者：

1 const reverse = str => str && reverse(str.substr(1)) + str[0];