Source-Code

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Spiel mit String</title>
<LINK REL="SHORTCUT ICON" HREF="..\picture_library\favicon.ico">
<style>
ol {
list-style-type: none; /* Entfernt die Standardnummerierung */

margin: 0; /* Setzt den äußeren Abstand auf 0 */
padding-left: 5px; /* Verringert den inneren Abstand (links) */

}
ol li::before {
content: counter(seoZaehler, lower-alpha) ") "; /* Fügt die Klammer und das Leerzeichen hinzu */

counter-increment: seoZaehler; /* Inkrementiert den Zähler */
}
</style>
<script>
let Zeichenkette = "Es sind 38 Zeichen in der Zeichenkette";
let Counter = 1;
function infos(Argument)
{ if(Counter != 1) document.getElementById('Ausgabe2').innerHTML += " ";

schreibe(1,'Ausgabe2',Counter++ + ". Klick" ) ;

schreibe(1,'Ausgabe2'," var Argument = " + Argument) ;

schreibe(1,'Ausgabe2', " LENGTH ------------") ;

schreibe(1,'Ausgabe2', " var Argument = " + Argument.length );
}

function schreibe(wie,wo,was)
/* schreibt in ein "Ausgabefeld" (Tag mit der id="wo") "wie" ist 0 neu oder 1 erg?nzt den Text mit "was" */
{ /* Ersetzt Umlaute mit HTML-Notation */

if(wie==0){
document.getElementById(wo).innerHTML = was;
}
else{
document.getElementById(wo).innerHTML += ' ' + was;
}
}

function ZeichenCode(wo,Liste)
{

let Test = document.getElementById(wo).innerHTML; /* Die aktuelle Ausgabe pr?fen */

if(Liste.length == 0) /* Wenn man keine Eingabe machte wird ein Std.String angezeigt */
{Liste = String.fromCharCode(9786,9787,9829,9830,9827,9824,8226,9688,9675,9689,9794,9792,9834,9835,9788,9658,9668,8597,8252,182,167,9644,182,8616,8593,8595,8594,8592,8735,8596,9650,9660);
document.getElementById('TA').value = Liste;
}

if( Test.length < 25)

{

/*alert(Test + " " + Test.length);*/

for(i=0;i<Liste.length;i++)

{

schreibe(1,wo,Liste[i] + " hat den Code " + Liste.charCodeAt(i));

}

document.getElementById('BTTN').value = "Lade die Funktion!";

}

else

{

schreibe(0,wo,' AUSGABEFELD 3 ');

document.getElementById('BTTN').value = "Starte die Funktion!";

document.getElementById('TA').value = "";

}

}

</script>

</head>
<body bgcolor=#ddffdd>
<h1>Hier wird aufgelistet was mit 'String' in JS möglich ist</h1>
<seo id="Ausgabe">
 AUSGABEFELD 1 wurde beim Start beschrieben 
</seo>
<script>
schreibe(1,'Ausgabe',"Die Variable 'Zeichenkette' liegt im HEAD, wie auch alle Funktionen. Deklaration der Variablen Zeichenkette = " + Zeichenkette);

schreibe(1,'Ausgabe',"<h2>Eigenschaften</h2>");
schreibe(1,'Ausgabe',"Str.length" );
schreibe(1,'Ausgabe'," Länge der Zeichenkette = " + Zeichenkette.length);

schreibe(1,'Ausgabe'," Str.constructor" );
var Xx = Zeichenkette.constructor;
schreibe(1,'Ausgabe'," Konstruktor der Zeichenkette = " + Xx);

schreibe(1,'Ausgabe',"<h2>Methoden</h2>");

schreibe(1,'Ausgabe',"Str.charAt(4) Startet bei 0" );
schreibe(1,'Ausgabe'," Zeichen 5 in Zeichenkette = " + Zeichenkette.charAt(4));

schreibe(1,'Ausgabe'," Str[0] Startet bei 0" );
schreibe(1,'Ausgabe'," Zeichen 1 in Zeichenkette = " + Zeichenkette[0]);

schreibe(1,'Ausgabe'," Str.charCodeAt(4) Startet bei 0" );
schreibe(1,'Ausgabe'," Unicode-Wert des 5. Zeichens in Zeichenkette = " + Zeichenkette.charCodeAt(4));

schreibe(1,'Ausgabe'," Str.concat(' Hallo') " );
schreibe(1,'Ausgabe'," Verbindet Zeichenketten = " + Zeichenkette.concat(' Hallo'));

schreibe(1,'Ausgabe'," Str.indexOf('ei') startet bei 0 " );
schreibe(1,'Ausgabe'," Position von Wert in Zeichenketten = " + Zeichenkette.indexOf('ei'));
schreibe(1,'Ausgabe'," Position von Wert das es nicht gibt in Zeichenketten = " + Zeichenkette.indexOf('17'));

schreibe(1,'Ausgabe'," Str.lastIndexOf('ei') startet bei 0 " );
schreibe(1,'Ausgabe'," Position von Wert in Zeichenketten = " + Zeichenkette.lastIndexOf('ei'));

schreibe(1,'Ausgabe'," Str.match(/e\S{1}/gi) sucht mit Regex nach allen vorkommen. Im Beispiel mit 'e' (global und caseinsensitiv) wenn noch ein weiteres Zeichen folgt, aber nicht, wenn ein Leerzeichen dabei ist") ;
treffer = Zeichenkette.match(/e\S{1}/gi);
schreibe(1,'Ausgabe'," Anzahl Treffer " + treffer.length);
for(i=0;i<=8;i++)
{
schreibe(1,'Ausgabe'," " + i + " treffer ist: " + treffer[i]);
}

schreibe(1,'Ausgabe'," Str.replace(/e\S{1}/gi,'MIT') sucht mit Regex nach allen vorkommen. Im Beispiel mit 'e' (global und caseinsensitiv) wenn noch ein weiteres Zeichen folgt, aber nicht, wenn ein Leerzeichen dabei ist und ersetzt es mit Regex 'MIT'" );
schreibe(1,'Ausgabe'," Anzahl Treffer " + Zeichenkette.replace(/e\S{1}/gi,'MIT'));

schreibe(1,'Ausgabe'," Str.search(/z\S{1}/gi) gleich wie match, aber gibt die erste Trefferposition " );
schreibe(1,'Ausgabe'," Treffer-Position: " + Zeichenkette.search(/z\S{1}/gi));

schreibe(1,'Ausgabe'," Str.slice(von, bis) fast wie mid: Ermittelt Teilstring " );
schreibe(1,'Ausgabe'," Str.slice(2, 5): " + Zeichenkette.slice(1, 5));
schreibe(1,'Ausgabe'," Str.slice(-5): " + Zeichenkette.slice(-5));
schreibe(1,'Ausgabe'," Str.slice(25): " + Zeichenkette.slice(25));

schreibe(1,'Ausgabe'," Str.split(/e\S{1}/gi) sucht mit Regex nach allen Vorkommen und teilt den String dort auf" );
treffer = Zeichenkette.split(/e\S{1}/gi);
schreibe(1,'Ausgabe'," Anzahl Teile " + treffer.length);
for(i=0;i<=8;i++)
{
schreibe(1,'Ausgabe'," " + (i+1) + ". Teil ist: " + treffer[i]);
}

schreibe(1,'Ausgabe'," Str.substr(von, anzahl) wie mid oder fast wie slice: Ermittelt Teilstring " );
schreibe(1,'Ausgabe'," Str.substr(2, 5): " + Zeichenkette.substr(2, 5));
schreibe(1,'Ausgabe'," Str.substr(-5): " + Zeichenkette.substr(-5));
schreibe(1,'Ausgabe'," Str.substr(25): " + Zeichenkette.substr(25));

schreibe(1,'Ausgabe'," Str.substring(von, anzahl) wie mid oder fast wie slice: Ermittelt Teilstring " );
schreibe(1,'Ausgabe'," Str.substring(2, 5): " + Zeichenkette.substring(2, 5));
schreibe(1,'Ausgabe'," Str.substring(-5): " + Zeichenkette.substring(-5));
schreibe(1,'Ausgabe'," Str.substring(25): " + Zeichenkette.substring(25));

schreibe(1,'Ausgabe'," String Umwandlung" );
schreibe(1,'Ausgabe'," Str.toLowerCase(): " + Zeichenkette.toLowerCase());
schreibe(1,'Ausgabe'," Str.toUpperCase(): " + Zeichenkette.toUpperCase());
schreibe(1,'Ausgabe'," Str.trim(): " + Zeichenkette.trim());
schreibe(1,'Ausgabe'," String Umwandlung Obsolet");
schreibe(1,'Ausgabe'," Str.big(): " + Zeichenkette.big());
schreibe(1,'Ausgabe'," Str.blink(): " + Zeichenkette.blink());
schreibe(1,'Ausgabe'," Str.bold(): " + Zeichenkette.bold());
schreibe(1,'Ausgabe'," Str.fixed(): " + Zeichenkette.fixed());
schreibe(1,'Ausgabe'," Str.fontcolor(): " + Zeichenkette.fontcolor('red'));
schreibe(1,'Ausgabe'," Str.fontsize(): " + Zeichenkette.fontsize(5));
schreibe(1,'Ausgabe'," Str.italics(): " + Zeichenkette.italics());
schreibe(1,'Ausgabe'," Str.small(): " + Zeichenkette.small());
schreibe(1,'Ausgabe'," Str.strike(): " + Zeichenkette.strike());
schreibe(1,'Ausgabe'," Str.sub(): " + Zeichenkette.sub());
schreibe(1,'Ausgabe'," Str.sup(): " + Zeichenkette.sup());
schreibe(1,'Ausgabe'," Kombiniert");
schreibe(1,'Ausgabe'," Str.big().bold().fontcolor('blue'): " + Zeichenkette.big().bold().fontcolor('blue'));

schreibe(1,'Ausgabe',"<h2>Sortieren</h2>");

schreibe(1,'Ausgabe',"Array sortieren. Zuordnung-> let Gruppe = ['äää' ,'eins','zwei','drei','vier','Fünf', 'ahh'] " );

let Gruppe = ['äää' ,'eins','zwei','drei','vier','Fünf', 'ahh'];

schreibe(1,'Ausgabe'," 1) Unsortiet: " + Gruppe);
schreibe(1,'Ausgabe'," Anzahl Teile im Array " + Gruppe.length);

for(i=0;i<=8;i++)
{
schreibe(1,'Ausgabe'," " + i + ". Array Teil ist: " + Gruppe[i]);
}

schreibe(1,'Ausgabe'," 2) Sortiet: " + Gruppe.sort());
schreibe(1,'Ausgabe'," Anzahl Teile im Array " + Gruppe.length);
for(i=0;i<=8;i++)
{
schreibe(1,'Ausgabe'," " + i + ". Array Teil ist: " + Gruppe[i]);
}

schreibe(1,'Ausgabe', " 3) Sortiet nach DeutschRegel: " );

document.getElementById('Ausgabe').innerHTML += Gruppe.sort(function (a, b){return a.localeCompare(b, "de-DE");});

schreibe(1,'Ausgabe'," Anzahl Teile im Array " + Gruppe.length);
for(i=0;i<=8;i++)
{
schreibe(1,'Ausgabe'," " + i + ". Array Teil ist: " + Gruppe[i]);
}

schreibe(1,'Ausgabe'," UNICODE String.fromCharCode(64, 65, 40) (auf Gross/Kleinschrift achten!)") ;
schreibe(1,'Ausgabe'," Gibt eine Zeichenkette bestehend aus den codes = " + String.fromCharCode(64, 65, 40));

</script>

 
<h2>Startet info('123456')</h2>
<input type="button" onclick="infos('123456');" value="Starte die Funktion!" />
<seo id="Ausgabe2">
 AUSGABEFELD 2 
</seo>

 
<h2>Link</h2>
<a href=https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String target=_blank>JavaScript/Objekte/String</a>
 
*charAt() (Zeichen an einer Position ermitteln) 
*charCodeAt() (UTF-16-Zeicheneinheit an einer Position) 
*concat() (Zeichenketten zusammenfügen) 
*fromCharCode() (UTF-16-Zeicheneinheit erzeugen) 
*indexOf() (Position einer Zeichenkette ermitteln) 
*lastIndexOf() (letzte Position eines Zeichens ermitteln) 
*localeCompare() (vergleichen) 
*match() (Regulären Ausdruck anwenden) 
*replace() (Regulären Ausdruck anwenden und ersetzen) 
*search() (Suchen mit Regulärem Ausdruck) 
*slice() (Teil aus Zeichenkette extrahieren) 
*split() (Zeichenkette aufsplitten) 
*substr() (Teilzeichenkette ab Position ermitteln) 
*substring() (Teilzeichenkette ermitteln) 
*toLowerCase() (alles klein schreiben) 
*toUpperCase() (alles gross schreiben) 
*trim() (Leerzeichen entfernen) 

 
<a href=https://wiki.selfhtml.org/wiki/JavaScript/Objekte/RegExp target=_blank>JavaScript/Objekte/RegEx</a>
 

<h2>Source-Code:</h2>
<iframe src="PHP_Zeigen.php" width=700px height=500px scrolling="yes" wordwarp="yes" style="background-color:#ffffff"></iframe>

 
<h2>Startet ZeichenCode(wo,was)</h2>
Listet die Zeichen im Textfeld und ihren Unicode auf 
<textarea id="TA" cols=40 rows=1 style="font-size: 200%"></textarea>
 

<input type="button" id=BTTN onclick="ZeichenCode('Ausgabe3',document.getElementById('TA').value)" value="Starte die Funktion!">

<seo id="Ausgabe3">
 AUSGABEFELD 3 
</seo>
 
<h2>Zahlen im String:</h2>
<pre>Fliesskomma = "987.56";
Ganzzahl = "55";
Keinzahl = "Seo";</pre>
<script>
Fliesskomma = "987.56";
Ganzzahl = "55";
Keinzahl = "Seo";
try
{

document.write("a) (Ganzzahl + 111) = " + (Ganzzahl + 111));

document.write(" b) (Ganzzahl * 1 + 111) = " + (Ganzzahl * 1 + 111));

Ganzzahl *= 1;

document.write(" c1) Ganzzahl *= 1");

document.write(" c2) (Ganzzahl + 111) = " + (Ganzzahl + 111));

}
catch(e)
{

document.write("Ganzzahl Fehler " + e);
}

</script>

 

 Die Variable Ganzzahl wurde mit der Zeichenkette "55" geladen (achte auf die Gänsefüsschen) und ist somit eine Stringvariable. Man kann in JS Variablen nur mit let, var, const oder gar nicht deklarieren, aber das hat eigentlich bloss mit dem Gültigkeitsbereich und nicht mit dem Typ zu tun.

 Den Typ erhält die Variable erst mit der Initialisation (Wertzuordnen), der aber auch nicht in Stein gemeisselt ist und sich im Verlauf des Scripts auch ändern kann.

<ol style="counter-reset: seoZaehler;">

<li>Da der Operator '+' auch zur Verkettung von Strings benutzt wir und die Variable Ganzzahl als String "geladen" wurde, werden hier die 2 Elemente verkettet

<li>Durch die Multiplikation verwandelt sich die Variable Ganzzahl in ein Integer und das Plus wird zur Addition.

<li>Erbring den Beweis, dass die Variable Ganzzahl durch die Multiplikation in ein Integer verwandelt wurde, somit wird die selbe Schreibweise wie in a) von einer Stringsverkettung zur Addition.

</ol>

 Das gleiche Experiment aber mit einer Stringvariablen ohne numerischen Inhalt.

 Es wird zwar kein Fehler oder Programmunterbruch generiert, jedoch ist ausser bei der Stringverkettung das Resultat natürlich unsinnig (NaN = Not-A-Number) 
<script>
try
{

document.write("a) (Keinzahl + 111) = " + (Keinzahl + 111));

document.write(" b) (Keinzahl * 1 + 111) = " + (Keinzahl * 1 + 111));

Keinzahl *= 1;

document.write(" c1) Keinzahl *= 1");

document.write(" c2) (Keinzahl + 111) = " + (Keinzahl + 111));

}
catch(e)
{

document.write("Keinzahl Fehler " + e);
}

</script>

<h3>isNaN(x)</h3>

Somit ist man bei der ersten Anweisung, die auf NaN prüft angekommen: 

Sehr nützlich, da tatsächlich auf die Abwesenheit von Zahlen im String geprüft wird. 
<script>

document.write("isNaN(Ganzzahl) = " + isNaN(Ganzzahl));

document.write(" isNaN(Fliesskomma) = " + isNaN(Fliesskomma));

document.write(" isNaN(Keinzahl) = " + isNaN(Keinzahl));

document.write(' isNaN("00000") = ' + isNaN("00000"));

document.write(' isNaN("ab123") = ' + isNaN("ab123"));

document.write(' isNaN("123ab") = ' + isNaN("123ab"));

</script>

<h3>typeof(x)</h3>

Etwas mehr Informationen gibt typeof(x), berücksichtigt aber nicht den Inhalt eines Strings 

Somit hat man auch eine Auflistung aller möglichen Datentypen in JS... obwohl "object" mehrere Typen zusammenfasst und 'number' auch keine Unterscheidung zwischen int und float macht. 
<script>

document.write("typeof(55) = " + typeof(55) );

document.write(" typeof(5.5) = " + typeof(5.5) );

document.write(" typeof('55') = " + typeof("55") );

document.write(" typeof([55]) = " + typeof([55]) );

document.write("typeof(true) = " + typeof(true) );

document.write(" typeof(1n) = " + typeof(1n) );

document.write(" typeof(BigInt(1)) = " + typeof(BigInt(1)) );

document.write(" Test = 6n / BigInt(3)" + (6n / BigInt(3) ) );

document.write(" typeof(ff()) = " + typeof(ff()) + " hängt vom return(Wert) ab" );

document.write(" typeof(Symbol()) = " + typeof(Symbol()) );

document.write(" Test: var1 = Symbol(5.5); var2 = Symbol(5.5);" );

var1 = Symbol(5.5);

var2 = Symbol(5.5);

try

{

document.write(var1);

}

catch(e)

{

document.write(" document.write(var1); FEHLER: " + e);

}

document.write(" var1 == var2 ist " + (var1 == var2) );

document.write(" var1 === var2 ist " + (var1 === var2) );

document.write(" typeof(unbekannteVariable) = " + typeof(unbekannteVariable) );

function ff()

{return(23);}
</script>

<h3>Number(x)</h3>

Wie der Trick mal 1 Multiplikation wandelt auch Number(x) die Werte in einem String in Zahlen um oder gibt 'NaN' zurück: 
<script>

document.write("Number(Ganzzahl) = " + Number(Ganzzahl));

document.write(" Number(Fliesskomma) = " + Number(Fliesskomma));

document.write(" Number(Keinzahl) = " + Number(Keinzahl));

document.write(' Number("00000") = ' + Number("00000"));

document.write(' Number("ab123") = ' + Number("ab123"));

document.write(' ("123ab" * 1) = ' + ("123ab" * 1) );

</script>

 Aber Number hat noch weitere Methoden, die typeof ergänzen. Hier nur eine kleine Auswahl, aber es ist es Wert Number(x) besser anzuschauen 
<script>

document.write(" Number.isFinite(10/3) = " + Number.isFinite(10/3));

document.write(" Number.isFinite(10/0) = " + Number.isFinite(10/0));

document.write(" Number.isInteger(10.25) = " + Number.isInteger(10.25));

document.write(" Number.isInteger(10) = " + Number.isInteger(10));

document.write(" ('10.25' + .75) = " + ('10.25' + .75) );

document.write(" (Number.parseFloat('10.25Seo') + .75) = " + (Number.parseFloat('10.25Seo') + .75) );

document.write(" Number.parseInt(10.99) = " + Number.parseInt(10.5));

document.write(" Number.parseInt('70 Jahre') = " + Number.parseInt('70 Jahre'));

document.write(" Zahlenrange in JavaScript von Number.MIN_VALUE bis Number.MAX_VALUE = von " + Number.MIN_VALUE + " bis " + Number.MAX_VALUE);

</script>

<hr>
 

<input type=button onclick="window.open('https://chepre.servercorner.net:8443/smb/file-manager/list?currentDir=/httpdocs/prg/js&domainId=925');" value="Admin" />
</body>
</html>