Kreditkartennummern maskieren – Tutorial zu JavaScript

Wenn Sie im Internet einkaufen, dann wird Ihnen manchmal Ihre Kreditkartennummer eingeblendet, und zwar nicht die ganze Nummer, sondern nur die letzten 4 Ziffern, und der Rest ist maskiert. Und Ihre Aufgabe, sollten Sie sie einnehmen, besteht nun darin, genau solch eine Funktion zu schreiben. Die bekommt als Parameter eine Kreditkarte übergeben, und er setzt jetzt jedes einzelne Zeichen durch ein Sternchen, außer die letzten 4 Zeichen. Und dann wird diese maskierte String zurückgegeben. Hier unten sehen Sie nochmal die Tests, die bestanden werden müssen. Ich habe hier eine Kreditkartennummer. Da wird jede einzelne Ziffer durch ein Stern ersetzt, außer die letzten 4. Wenn die ganze Zeichenkette kürzer als 4 Zeichen ist, dann wird natürlich die komplette Zeichenkette zurückgeliefert. Und ansonsten wird eben alles hier nur ersetzt. Wenn Sie die Aufgabe jetzt erstmal selber programmieren möchten, dann können Sie sich aus den Übungsdateien, die Aufgabenstellung herunterladen, gehen Sie in die entsprechende Datei. 01 Kreditkartennummern .js. Da sehen Sie auch nochmal die Tests, und hier können Sie Ihren Code eintragen. Und der muss natürlich den entsprechenden Wert zurückgeben. Um diese Tests auszuführen, gehen Sie dann auf Kommandozeile und tippen mal eine mocha, gefolgt vom Namen der Datei, wo Sie den Test ausführen möchten. Und indem Falle war alles OK. Also meine Lösung hier ist schon richtig. Wichtig ist, Sie brauchen um Mocha auszuführen, natürlich NPM und Mocha. Mocha können Sie installieren mit npm install-ge für global Mocha. Und natürlich brauchen Sie vor auch NPM, weil das habe ich Ihnen schon in einem anderen Video erklärt. Schauen wir uns mal die konkrete Lösungen an, die ich jetzt Ihnen hier vorschlagen möchte. Ich habe sogar 2 Lösungen gleich. Gehe hier mal weg. So, die erste Lösung ist die. Ich bekomme hier meine Kreditkartennummer, und da war es mal hier erstmal 2 Teilstrings. Das eine ist der lesbare Teil. Das sind die letzten 4 Ziffern, die speichere ich hier einfach in der Variable readable ab. Und dann nenne ich den gesamten String und ersetzte global alles was ich habe mit einem Sternchen. Das heißt, ich habe einen String. Der ist komplett mit Sternchen aufgeführt. Und jetzt nehme ich von diesem String, der komplett aus Sternchen besteht, alles bis auf die letzten 4 Stellen. Hier habe ich nochmal dieses mask.length-4. Und dann packe ich die eigentlichen lesbaren 4 Stellen hier hinten dran. Das ist die eine Variante. Und wenn ich jetzt hier zum Beispiel einen Fehler machen würde, da eine 5 hinschreiben würde, dann schauen wir mal, ob mein Test noch besteht. Nein. Jetzt habe ich hier einen Fehler im Test, weil irgendwas hat nicht funktioniert. Und er zeigt mir hier auch an, er erwartet hier diesen String, bekommt aber hier einen String, der eine andere Länge hat. Also hier muss ich wieder die 4 eintragen. Und dann ist alles wieder in Ordnung. Es gibt aber noch eine andere Variante, um dieses Problem zu lösen. Und darum geht es ja eigentlich, die sieht so aus. Der ganze untere Teil ist jetzt hier mit gar nicht mehr erreicht. Deswegen ist es auch so ein bisschen schwächer dargestellt. Und zunächst einmal hole ich mir jetzt mit Slice hier alles von Beginn an, ab 0 bis zur 5 letzten Stelle, also bis -4. Und da führe ich jetzt genau das Gleiche aus wie hier unten auch, ein Replace. Ich ersetzte alles durch ein Sternchen. Und dann füge ich hinten einfach wieder die letzten 4 Ziffern an. Eine, wie ich finde, etwas elegantere und schönere Methode, um das Ganze zu lösen. Und auch hier möchte ich jetzt mal wissen, ob das funktioniert. Mocha, und dann habe ich hier passing, jawohl. Das ist eine Lösung, die diese Tests hier besteht, und damit auch die Aufgabe korrekt löst.