Jak obrátit string v JavaScriptu – využití metod split, reverse a join

Vraťme se zpátky k minulému článku o tom, jak zjistit, jestli je věta či slovo palindrom. Rozebrali jsme si javascriptovou funkci, která má za úkol toto zjistit. Co je to palindrom? Je to věta či fráze, která se zepředu i zezadu čte stejně. Proto si spolu rozebereme otázku, která mohla vzniknout právě minulým článkem: Jak obrátit string v JavaScriptu?

Taky se pokusím nastínit, jak začít přemýšlet jako programátor a začít hledat řešení problémů, které vznikají. Jak se nad tím zamyslet a i trochu vyhodit přemýšlení ze zajeté škatulky. Což je popravdě něco, co mi furt dělá trochu problém, ale všechno je to vývoj. Pomalu, ale jistě. Stále je to proces, který se učím. Osobně si myslím, že právě programování je neustálý proces učení. Učit se nalézat řešení a uvědomit si, že těch řešení může být několik. 

Pojďme se tedy začít učit přemýšlet programátorsky na problému obrácení pořadí znaků ve stringu. 

Jak obrátit string v JavaScriptu?

Pokud skočíte kamkoliv na internet, najdete tam celkem dost zdrojů, jak tohle udělat. A narazíte na pár možností, kdy nejčastější bude použití tří metod – split(), reverse() a join(). A i já jsem tyhle metody použila v minulém článku.

Musela jsem použít všechny tři metody? Ano, pokud bych to chtěla udělat tak, jak jsem to udělala. 

Proč jsem použila tyto tři metody?

Moje prvotní otázka by byla – můžu použít metodu reverse() čistě na string? Jednoduchá odpověď je ne, nemůžu. 

let str = "hello"
let reversedStr = str.reverse()
console.log(reverseString)

V konzoli nám tento kód vyhodí chybu:

TypeError: str.reverse is not a function

Tahle chyba nám říká, že metoda reverse() není metodou stringu. Ale víme, že existuje. Jak tedy budu jako programátor přemýšlet dál?

Zeptám se, na co tedy metoda reverse() funguje. A zjistím, že funguje na pole (array). Dobře, to je fajn vědět. Pokud totiž vím, že funguje na pole, můžu se jako programátor se svým problémem posunout dál. Řešeným problémem stále je to, že se pokoušíme obrátit pořadí znaků ve stringu. Tedy například místo “hello” do konzole vypsat “olleh”.

Rozkouskuj si problém na dílčí části.

Co sem se naučila je to, že ať už před sebou mám jakýkoliv problém, tak si ho musím rozdělit na menší, dílčí části. Je úplně jedno, jestli jdete programovat obří aplikaci, nebo jenom jednu funkci, nebo vytvořit jednu stránku na webu či deset. Potřebujete si to rozdělit na menší části a věnovat se jim postupně.

Největší stres při práci jako junior frontend developerky je pro mě právě to, když dostanu velký úkol a já logicky hned nevím, jak ho vyřešit. A popravdě mi dělá často problém si to rozkouskovat. Ale pak mi to sepne (samotné či s pomocí) a jdu na to prostě kus po kusu. Jak budu tedy postupovat dál v našem úkolu na obrácení pořadí znaků ve stringu?

Už jsem zjistila, že metoda reverse() nefunguje na string a také to, že funguje na pole. Ptám se tedy dál. Pokud nefunguje na string, ale funguje na pole – můžu přeměnit znaky ve stringu na pole? 

Tedy místo:

let string = "já jsem string"

získat:

let stringToArr = [ 'j', 'á', ' ', 'j', 's', 'e', 'm', ' ', 's', 't', 'r', 'i', 'n', 'g' ]

Můžete si to představit tak, že v případě let string máte všechny znaky na jednom talíři. A v případě let stringToArr jste si dali každý znak stringu na samostatný talířek. A jestli můžeme hýbat jenom talířky, tak to znamená, že si rozkouskovaný string uložený do pole můžeme přeskládat. Tedy použít na něj metodu reverse().

Hodíme si to do funkce:

function stringReverse(str) {
   let splitString = str.split("")
   let reverseString = splitString.reverse()
   // ...pokračování funkce
 }

console.log(stringReverse("hello"))

Vytvoříme funkci stringReverse(str) , která přijímá jeden argument (str), tedy string. Ve funkci nejdříve pomocí metody split() rozdělíme náš string a uložíme to do proměnné splitString. Pak můžeme pokračovat metodou reverse(). Vytvoříme si novou proměnnou reverseString a tam použijeme metodu reverse() na splitString.

Tak fajn, máme rozdělený string do pole a obrácené pole. Jak se budeme ptát dál. Jednoduchá otázka zní, jestli lze to pole spojit zpátky do stringu, ne? Jasně, že jde. Jinak bychom tu dneska nebyli. K tomu použijeme metodu join().

A celá funkce pak bude vypadat třeba takto:

function stringReverse(str) {
   let splitString = str.split("")
   let reverseString = splitString.reverse()
   let result = reverseString.join("")
   return result;
 }

console.log(stringReverse("hello"))

Znovu spojený string uložíme do proměnné result, ten si vrátíme a následně si to můžeme vypsat do konzole a přesvědčit se, že z “hello” máme “olleh”.

Lze funkci zjednodušit?

Patrně bych se neptala, kdyby to nešlo, takže ano, jde. 

Místo vytvoření tří proměnných a následného vrácení výsledku si to můžeme rovnou vrátit:

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

console.log(reverseString("how are you?"))

A funkci tak zjednodušit do jednoho řádku. A zase se přesvědčit v konzoli, že všechno funguje tak, jak má.

Shrnutí a závěr.

Naučit se obrátit string se možná může někomu zdát jasné jako facka, ale já tady vidím dost poslání. A to třeba následující:

• Pokud programujete a dostanete složitý úkol, kouskujte si ho po částech, ptejte se postupně. Povězme, že máte za úkol vytvořit webovou stránku, která bude mít header, footer, boční menu a hlavní obsah. Někoho by to mohlo vyděsit, že tolik věcí najednou udělat. No tak fajn, tak začnu tím, že udělám nejdřív header, záhlaví. A pokud někoho vyděsí i záhlaví, tak si to nakouskuju tak, že nejdřív dám logo do záhlaví, pak až menu, pak sociální ikonky a další. Kouskovat na části. A postupně se posouvat s úkolem dál.
• Hledejte si informace na internetu. Pokud máte v programování problém, je asi tak na 99 % možné, že už ho měl někdo před vámi a najdete tam spoustu informací. StackOverflow, YouTube a ChatGPT je váš kámoš. Případně třeba i w3schools nebo MND Web Docs. Plus spoustu dalších zdrojů.
• Pamatujte, že jedna věc se dá udělat mnoha způsoby. To že něčí řešení je jiné, než vaše, ještě neznamená, že to vaše je špatně, jak se říká, dokud to funguje, tak kde je problém. Problémy hledáme pak, postupem času, jak se vyvíjíme.
• Revidujte svůj kód. Možná zjistíte, že to co jste udělali před měsícem už není tak DRY a voňavý, jak by mohlo být. Ale všechno je to vývoj.

Pokud vás zajímají další možnosti, jak obrátit pořadí stringu, není nic jednoduššího, než do google napsat něco jako “how to reverse string in javascript” nebo v tom jazyce, ve kterém vás to zajímá :).