JavaScript字符串反转的多种实现方式详解

JavaScript字符串反转概述

在freeCodeCamp进行编程练习时，遇到了一道关于字符串反转的题目。字符串反转是JavaScript面试中频繁出现的经典问题。面试官通常会给出一个字符串如“Hello Word!”，要求利用JavaScript将其转换为“!droW olleH”。

作为初学者，我结合之前掌握的数组知识与题目提示完成了任务。随后我思考是否还有其他解决方案，经过搜索发现存在多种实现路径，现将这些方法整理列出，以便日后查阅与应用。

任务目标

核心需求如下：

需要将输入的字符串进行反向输出，最终结果仍为字符串格式。实现过程中需先将字符串转换为数组，处理完成后再转换回字符串。

接下来，我们将逐一探讨实现上述目标的具体方法。

利用内置函数实现反转

利用内置函数

题目提示可以通过组合三种内置方法来轻松实现字符串反向显示：

String.prototype.split()Array.prototype.reverse()Array.prototype.join()

简要原理说明：

split()方法将字符串拆分为单个字符，生成包含每个字符的数组；reverse()方法用于反转数组元素的顺序，使首元素变为末元素，末元素变为首元素；join()方法则将数组中的所有元素拼接为一个完整的字符串。

具体示例如下：

function reverseString(str)
 { // 第一步，使用split()方法，返回一个新数组 
// var splitString = "hello".split(""); 
var splitString = str.split(""); 
//将字符串拆分 // 返回一个新数组["h", "e", "l", "l", "o"] 
// 第二步，使用reverse()方法创建一个新数组 
// var reverseArray = ["h", "e", "l", "l", "o"].reverse(); 
var reverseArray = splitString.reverse(); 
// 原数组元素顺序反转["o", "l", "l", "e", "h"] 
// 第三步，使用join()方法将数组的每个元素连接在一起，组合成一个新字符串 
// var joinArray = ["o", "l", "l", "e", "h"].join(""); 
var joinArray = reverseArray.join(""); // "olleh" 
// 第四步，返回一个反转的新字符串 return joinArray; 
// "olleh"}reverseString("hello"); 
// => olleh

将上述步骤简化，可合并为单行代码：

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

递减循环遍历法

通过递减循环遍历实现字符串反转

该方法利用for循环对原字符串进行递减索引遍历，并将遍历得到的字符重新拼接为新字符串：

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

以字符串"hello"的反转为例，遍历过程如下表所示：

迭代顺序

对应

的值

新字符串 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循环：

function reverseString (str) {
 var newString = '';
 var i = str.length; while (i > 0) {
 newString += str.substring(i - 1, i);
 i--; 
} 
return newString;}reverseString("hello"); 
// => olleh

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

递归算法实现

使用递归实现字符串反向

结合String.prototype.substr()和String.prototype.charAt()方法同样可以实现字符串的反转。

substr() 方法返回从指定位置开始且长度为指定值的子字符串。示例如下：

var str = "abcdefghij";
console.log("(1,2): " + str.substr(1,2));
 // (1,2): bcconsole.log("(-3,2): " + str.substr(-3,2));
 // (-3,2): hiconsole.log("(-3): " + str.substr(-3)); 
// (-3): hijconsole.log("(1): " + str.substr(1)); 
// (1): bcdefghijconsole.log("(-20, 2): " + str.substr(-20,2)); 
// (-20, 2): abconsole.log("(20, 2): " + str.substr(20,2)); 
// (20, 2):

charAt() 方法返回字符串中指定索引位置的字符。字符索引从左至右递增，首个字符索引为0，末字符（假设位于stringName中）索引为stringName.length - 1。若指定的index超出范围，则返回空字符串。

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

综合上述方法，可实现字符串反转：

function reverseString(str) { if (str === "") { 
return ""; } else { 
return reverseString(str.substr(1)) + str.charAt(0); }
}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"

上述方法可进一步优化，改用三元运算符：

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

也可采用以下写法：

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

其他实现方式

其他实现方法

除上述方法外，还存在其他多种实现途径：

方法一

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

方法二

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

方法三

function reverseString (str) { function rev(str, len, newString) { return (len === 0) ? newString : rev(str, --len, (newString += str[len])); } return rev(str, str.length, '');}reverseString("hello"); // =>olleh

方法四

function reverseString (str) { str = str.split(''); var len = str.length, halfIndex = Math.floor(len / 2) - 1, newString; for (var i = 0; i <= halfIndex; i++) { newString = str[len - i - 1]; str[len - i - 1] = str[i]; str[i] = newString; } return str.join('');}reverseString("hello"); // => olleh

方法五

function reverseString (str) { if (str.length < 2) { return str; } var halfIndex = Math.ceil(str.length / 2); return reverseString(str.substr(halfIndex)) + reverseString(str.substr(0, halfIndex));}reverseString("hello"); // =>olleh

方法六

function reverseString(str) { return [].reduceRight.call(str, function(prev, curr) { return prev + curr; }, '');}reverseString("hello"); // =>olleh

ES6新特性应用

ES6语法实现

在ES6标准下，实现方式更为简洁，例如：

[...str].reverse().join('');

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

或者：

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

字符串反转虽是一个简单的算法，但常作为JavaScript基础面试题出现。前文列举了多种解决方案，甚至包含更复杂的实现。若您有更好的方法，欢迎在评论区补充分享。