JavaScript中反轉(zhuǎn)字符串的7種方法全攻略
最近在練習字符串操作時,被一道看似簡單的題卡住了: “怎么把 'hello' 變成 'olleh'?”
網(wǎng)上一搜,發(fā)現(xiàn)居然有 7 種寫法!有的短短一行,有的要寫十幾行;有的快如閃電,有的可能讓瀏覽器卡住…別慌!今天我就用 最直白的大白話 + 最詳細的注釋 + 最真實的踩坑記錄,帶你從零搞懂所有方法——不講概念,只講人話;不堆代碼,只講為什么。
一、先搞明白:什么是“反轉(zhuǎn)字符串”
簡單說:就是把字符串里的字符順序完全倒過來。
比如:
'abc'→'cba''JavaScript'→'tpircSavaJ''12345'→'54321'
注意:字符串在 JS 中是不可變的(不能直接改),所以每次反轉(zhuǎn)都必須創(chuàng)建一個新字符串。
二、7 種方法詳解(附完整可運行代碼)
每種方法都包含:
- 一句話原理
- 帶中文注釋的代碼
- 小白友好圖解
- 什么時候用 / 什么時候避開
方法1:三步走大法(最常用!推薦新手首選)
split() → reverse() → join()
function reverseStr(str) {
// 第一步:把字符串 'abc' 拆成數(shù)組 ['a','b','c']
// split('') 中的 '' 表示“按每個字符拆開”
const arr = str.split('');
// 第二步:把數(shù)組 ['a','b','c'] 反轉(zhuǎn)成 ['c','b','a']
// reverse() 是數(shù)組的內(nèi)置方法,會直接修改原數(shù)組!
const reversedArr = arr.reverse();
// 第三步:把數(shù)組 ['c','b','a'] 合并成字符串 'cba'
// join('') 中的 '' 表示“中間不加任何符號”
const result = reversedArr.join('');
return result;
}
console.log(reverseStr('abc')); // 輸出:'cba'
小白理解圖:'abc'→ 拆開:['a', 'b', 'c']→ 翻個身:['c', 'b', 'a']→ 粘起來:'cba'
優(yōu)點:代碼短、好記、適合絕大多數(shù)場景
注意:對 emoji(如 '????')或帶音標的字(如 'café')在老版本瀏覽器中可能出錯(后面會教怎么安全處理)
方法2:傳統(tǒng) for 循環(huán)(最穩(wěn)!兼容性無敵)
function reverseStr(str) {
let result = ''; // 準備一個空盒子,用來裝反轉(zhuǎn)后的字符
// 從最后一個字符開始,往前數(shù):i = 2 → 1 → 0(因為 'abc' 長度是3,索引是0,1,2)
for (let i = str.length - 1; i >= 0; i--) {
result = result + str[i]; // 把當前字符 str[i] 加到 result 后面
}
return result;
}
console.log(reverseStr('abc')); // 輸出:'cba'
小白理解圖(以 'abc' 為例):
| 循環(huán)次數(shù) | i 的值 | str[i] | result 變化 |
|---|---|---|---|
| 第1次 | 2 | 'c' | '' + 'c' → 'c' |
| 第2次 | 1 | 'b' | 'c' + 'b' → 'cb' |
| 第3次 | 0 | 'a' | 'cb' + 'a' → 'cba' |
優(yōu)點:兼容所有瀏覽器(IE6 都能跑?。⑦壿嬊逦?、性能好
小技巧:str.length - 1 是最后一個字符的下標(JS 數(shù)組/字符串下標從 0 開始)
方法3:for...of 循環(huán)(更現(xiàn)代、更優(yōu)雅)
function reverseStr(str) {
let result = ''; // 還是那個空盒子
// for...of 會自動一個一個拿出字符串里的字符
for (const char of str) {
result = char + result; // 關(guān)鍵!不是加在后面,而是加在前面!
}
return result;
}
console.log(reverseStr('abc')); // 輸出:'cba'
小白理解圖(以 'abc' 為例):
| 循環(huán)次數(shù) | char | result 變化 |
|---|---|---|
| 第1次 | 'a' | '' + 'a' → 'a' |
| 第2次 | 'b' | 'b' + 'a' → 'ba' |
| 第3次 | 'c' | 'c' + 'ba' → 'cba' |
優(yōu)點:代碼更簡潔、天然支持 emoji 和中文等復雜字符(Unicode 安全)
記住口訣:“for...of 遍歷字符,char + result 就是反轉(zhuǎn)”
方法4:展開運算符法(ES6 新寫法,強烈推薦?。?/h3>
function reverseStr(str) {
// [...str] 就像魔法:把 'abc' 變成 ['a','b','c']
// 然后照舊反轉(zhuǎn) + 合并
return [...str].reverse().join('');
}
console.log(reverseStr('abc')); // 輸出:'cba'
function reverseStr(str) {
// [...str] 就像魔法:把 'abc' 變成 ['a','b','c']
// 然后照舊反轉(zhuǎn) + 合并
return [...str].reverse().join('');
}
console.log(reverseStr('abc')); // 輸出:'cba'
為什么比方法1更好?
split('')在老瀏覽器中對'????'可能拆成亂碼;[...str]是 ES6 標準,完美支持所有 emoji、中文、帶音標文字!- 一句話總結(jié):這是方法1的升級版,兼顧簡潔 + 安全,現(xiàn)在寫代碼就用它!
方法5:遞歸法(理解“自己調(diào)自己”,鍛煉思維)
function reverseStr(str) {
// ?? 退出條件(非常重要!沒有它會無限循環(huán)直到崩潰)
if (str === '') {
return ''; // 空字符串反轉(zhuǎn)還是空字符串
}
// ?? 遞歸核心:把第一個字符放到“剩下部分的反轉(zhuǎn)結(jié)果”后面
// str.substring(1) → 去掉第一個字符(如 'abc' → 'bc')
// str.charAt(0) → 拿到第一個字符(如 'abc' → 'a')
return reverseStr(str.substring(1)) + str.charAt(0);
}
console.log(reverseStr('abc')); // 輸出:'cba'
小白理解圖(遞歸調(diào)用過程):
reverseStr('abc')
├─ reverseStr('bc') + 'a'
├─ reverseStr('c') + 'b'
└─ reverseStr('') + 'c' → '' + 'c' = 'c'
→ 'c' + 'b' = 'cb'
→ 'cb' + 'a' = 'cba'
重要警告:
- 適合學習算法思想、理解分治(Divide & Conquer)
- 不要在項目里用! 字符串太長(比如 10000 字符)會爆棧(Stack Overflow),瀏覽器直接卡死!
- 類比:就像俄羅斯套娃,一層層打開,最后一層是最小的(空字符串),然后一層層合上。
方法6:reduce 法(函數(shù)式編程風,酷炫但需理解)
function reverseStr(str) {
return [...str].reduce((reversed, char) => {
// reversed:之前累積的結(jié)果(初始為空字符串 '')
// char:當前正在處理的字符
return char + reversed; // 把新字符加到前面,實現(xiàn)反轉(zhuǎn)
}, ''); // '' 是初始值(reversed 的起點)
}
console.log(reverseStr('abc')); // 輸出:'cba'
小白理解圖(以 'abc' 為例):
| 步驟 | reversed(之前結(jié)果) | char | 返回值(新 reversed) |
|---|---|---|---|
| 初始 | '' | — | — |
| 第1次 | '' | 'a' | 'a' + '' → 'a' |
| 第2次 | 'a' | 'b' | 'b' + 'a' → 'ba' |
| 第3次 | 'ba' | 'c' | 'c' + 'ba' → 'cba' |
優(yōu)點:代碼非常“函數(shù)式”,沒有變量賦值,適合喜歡數(shù)學思維的同學
注意:reduce 本質(zhì)也是循環(huán),性能和 for...of 差不多,但初學者可能覺得繞。
方法7:Array.from() 法(方法4的“雙胞胎”,同樣安全)
function reverseStr(str) {
// Array.from(str) 和 [...str] 功能完全一樣,都是把字符串變成數(shù)組
return Array.from(str).reverse().join('');
}
console.log(reverseStr('abc')); // 輸出:'cba'
小知識:Array.from(str) 和 [...str] 是等價的,你可以任選其一。
為什么多一種寫法?
Array.from()還可以做更多事(比如轉(zhuǎn)換類數(shù)組對象),是更通用的 API;[...str]更簡短,是日常開發(fā)中的“快捷寫法”。
三、新手必看!3 個真實踩坑記錄(血淚教訓)
坑1:split('')對 emoji 處理錯誤(老瀏覽器)
// 在 Chrome 80 以下或某些手機瀏覽器中:
'?????'.split(''); // 可能返回 ['', '', '', ''](亂碼!)
[...'?????']; // 正確返回 ['?????'](一個完整的 emoji)
解決方案:統(tǒng)一用 [...str] 或 Array.from(str)
坑2:遞歸調(diào)用忘記寫“退出條件”
// 錯誤示范!沒有 if 判斷,會一直調(diào)用自己直到崩潰
function badReverse(str) {
return badReverse(str.substring(1)) + str.charAt(0);
}
badReverse('abc'); // ? 頁面卡死!
解決方案:遞歸函數(shù)第一行必須寫清楚“什么時候停止”
坑3:reverse()修改了原數(shù)組(副作用?。?/h3>
const arr = ['a', 'b', 'c'];
arr.reverse(); // 直接把 arr 改成了 ['c','b','a']!
console.log(arr); // 輸出:['c','b','a'](原數(shù)組被改了?。?
const arr = ['a', 'b', 'c']; arr.reverse(); // 直接把 arr 改成了 ['c','b','a']! console.log(arr); // 輸出:['c','b','a'](原數(shù)組被改了?。?
解決方案:如果不想改原數(shù)組,先用 slice() 復制一份:
const newArr = arr.slice().reverse(); // slice() 創(chuàng)建副本
四、終極對比表(選哪個?看這里!)
| 方法 | 代碼長度 | 學習難度 | 運行速度 | Unicode 安全 | 推薦指數(shù) | 適合誰 |
|---|---|---|---|---|---|---|
| split+reverse+join | ???? | ?? | ???? | ?(老環(huán)境) | ??? | 快速驗證想法 |
| 傳統(tǒng) for 循環(huán) | ??? | ?? | ????? | ? | ????? | 新手入門首選! 兼容性最強 |
| for...of 循環(huán) | ???? | ??? | ???? | ? | ????? | 現(xiàn)代項目首選! 簡潔安全 |
| 展開運算符 [...str] | ????? | ??? | ???? | ? | ????? | 2024 年推薦寫法! 簡潔+安全 |
| 遞歸 | ?? | ????? | ?? | ? | ?? | 學算法/面試準備 |
| reduce | ???? | ???? | ??? | ? | ??? | 喜歡函數(shù)式編程者 |
| Array.from | ???? | ??? | ???? | ? | ???? | 作為 [...str] 的替代 |
給你的明確建議:
- 剛學 JS? 從 方法2(for 循環(huán)) 開始,徹底搞懂每一步!
- 想寫現(xiàn)代代碼? 主力用 方法4(展開運算符) ,又短又安全!
- 面試被問“還有別的方法嗎?” 把方法1、2、4、5 能說清楚就夠了!
五、課后小練習(動手才記得牢!)
請嘗試用 至少2種方法 實現(xiàn)以下功能,并在控制臺驗證:
// 1. 反轉(zhuǎn)一個句子(注意空格位置)
reverseStr('hello world'); // 應該輸出 'dlrow olleh'
// 2. 反轉(zhuǎn)帶 emoji 的字符串
reverseStr('I ?? JS ??'); // 應該保持 ?? 和 ?? 完整
// 3. 寫一個“安全版”函數(shù):對非字符串輸入也友好
reverseStr(null); // 應該輸出 ''
reverseStr(123); // 應該輸出 '321'
答案提示:用 String(input) 可以把任意值轉(zhuǎn)成字符串!
六、寫在最后:編程不是背代碼,而是理解“為什么”
這7種方法,沒有絕對的“最好”,只有“最適合當前場景”。
- 你可能會發(fā)現(xiàn):方法2(for循環(huán))雖然代碼長,但每一步都清晰可見;
- 方法4(展開運算符)雖然只有一行,但背后是整個 ES6 的設(shè)計哲學。
附:7種方法完整可運行代碼(一鍵復制)
// 方法1:split+reverse+join(基礎(chǔ)版)
function reverse1(str) { return str.split('').reverse().join(''); }
// 方法2:傳統(tǒng)for循環(huán)(最穩(wěn))
function reverse2(str) { let r=''; for(let i=str.length-1;i>=0;i--) r+=str[i]; return r; }
// 方法3:for...of循環(huán)(現(xiàn)代簡潔)
function reverse3(str) { let r=''; for(const c of str) r=c+r; return r; }
// 方法4:展開運算符(2024推薦?。?
function reverse4(str) { return [...str].reverse().join(''); }
// 方法5:遞歸(理解思想)
function reverse5(str) { return str===''? '': reverse5(str.substring(1)) + str.charAt(0); }
// 方法6:reduce(函數(shù)式)
function reverse6(str) { return [...str].reduce((r,c)=>c+r, ''); }
// 方法7:Array.from(方法4的兄弟)
function reverse7(str) { return Array.from(str).reverse().join(''); }
// 測試
console.log('方法1:', reverse1('abc'));
console.log('方法2:', reverse2('abc'));
console.log('方法3:', reverse3('abc'));
console.log('方法4:', reverse4('abc'));
console.log('方法5:', reverse5('abc'));
console.log('方法6:', reverse6('abc'));
console.log('方法7:', reverse7('abc'));
到此這篇關(guān)于JavaScript中反轉(zhuǎn)字符串的7種方法全攻略的文章就介紹到這了,更多相關(guān)JavaScript反轉(zhuǎn)字符串內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解javascript中原始數(shù)據(jù)類型Null和Undefined
這篇文章主要介紹了javascript中原始數(shù)據(jù)類型Null和Undefined的相關(guān)資料,需要的朋友可以參考下2015-12-12
淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)硪黄獪\談Javascript中的函數(shù)、this以及原型。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
innerHTML innerText textContent使用區(qū)別示例詳解
這篇文章主要為大家介紹了innerHTML innerText textContent使用區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11
JS循環(huán)發(fā)送請求時控制請求并發(fā)數(shù)實例
這篇文章主要介紹了JS循環(huán)發(fā)送請求時控制請求并發(fā)數(shù)實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
利用Query+bootstrap和js兩種方式實現(xiàn)日期選擇器
日期選擇器在我們平時開發(fā)的時候經(jīng)常要用到,下面這篇文章主要給大家介紹了利用Query+bootstrap和js這兩種方式實現(xiàn)日期選擇器的方法,文中兩種方法都給出了詳細的示例代碼,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01

