Skip to content

6. Zeichenketten

Zeichenketten in JavaScript sind denen in PHP sehr ähnlich.

Image

6.1. Skript [str-01]

Zunächst muss man verstehen, dass eine Zeichenkette, sobald sie erstellt wurde, nicht mehr geändert werden kann. Es gibt zahlreiche Methoden, um aus der ursprünglichen Zeichenkette eine neue zu erzeugen, doch die ursprüngliche bleibt dabei immer unverändert. Außerdem kann eine Zeichenkette zwei Arten annehmen:

  • [string], wenn sie mit einer Zeichenfolge initialisiert wird;
  • [object], wenn sie als Instanz der Klasse [String] erstellt wird; 

'use strict';

// Zeichenketten sind schreibgeschützt (sie können nicht geändert werden)

// eine Zeichenkette
const chaîne1 = "abcd ";
// Typ
console.log("typeof(chaîne1)=", typeof (chaîne1));
// Zeichen Nr. 2
console.log("chaîne1[2]=", chaîne1[2]);
// löst einen Fehler aus
chaîne1[2] = "0";

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Temp\19-09-01\javascript\strings\str-01.js"
typeof(chaîne1)= string
chaîne1[2]= c
c:\Temp\19-09-01\javascript\strings\str-01.js:1
TypeError: Cannot assign to read only property '2' of string 'abcd '
at Object.<anonymous> (c:\Temp\19-09-01\javascript\strings\str-01.js:12:12)
at Generator.next (<anonymous>)

6.2. Skript [str-02]

Dieses Skript zeigt, dass eine Zeichenkette auf zwei Arten erstellt werden kann.


'„use strict“;

// Es gibt zwei Arten von Zeichenketten

// eine Literalzeichenfolge
const chaîne1 = "abcd ";
// Typ
console.log("typeof(chaîne1)=", typeof (chaîne1));
// Instanz von String
const chaîne2 = new String("xyzt");
// Typ
console.log("typeof(chaîne2)=", typeof (chaîne2));
// andere Schreibweise (ohne „new“) – Typ [string] und nicht [object]
const chaîne3 = String("12 34");
// Typ
console.log("typeof(chaîne3)=", typeof (chaîne3));
// Der Typ [string] und der Typ [object] bieten dieselben Methoden, nämlich die der Klasse „String“
console.log("chaîne1.length=", chaîne1.length);
console.log("chaîne2.length=", chaîne2.length);

Kommentare

  • Zeile 6: Die übliche Methode zur Definition einer Zeichenkette. [chaîne1] hat den Typ [string];
  • Zeile 10: Eine Zeichenkette kann mithilfe des Konstruktors der Klasse [String] erstellt werden. [chaîne2] hat den Typ [object];

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\strings\str-02.js"
typeof(chaîne1)= string
typeof(chaîne2)= object
typeof(chaîne3)= string
chaîne1.length= 5
chaîne2.length= 4

Der Typ [string] verfügt über die Methoden der Klasse [String].

6.3. Skript [str-03]

Dieses Skript zeigt eine bestimmte Zeichenfolge mit Variableninterpolation.


'use strict';

// Zeichenkette
const chaîne = "Introduction à Javascript par l'exemple";
// Zeichenkette mit Variableninterpolation
const str = `[${chaîne}].substr(3, 2)=` + chaîne.substr(3, 2)
console.log(str);

Anmerkungen

  • Zeile 6: Es ist möglich, Zeichenfolgen zu verwenden, die Ausdrücke wie ${variable} enthalten, die durch den Wert der Variablen ersetzt werden. Dies folgt derselben Logik wie die $-Variablen in den Zeichenfolgen von PHP. Beachten Sie die Schreibweise einer solchen Zeichenfolge: Sie wird von einem „Backstick“ oder umgekehrten Apostroph (AltGr-7 auf einer französischen Tastatur) umgeben;

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Temp\19-09-01\javascript\strings\tempCodeRunnerFile.js"
[Introduction à Javascript par l'exemple].substr(3, 2)=ro

6.4. Skript [str-04]

Die Zeichenkette mit Variableninterpolation reicht nicht aus. Es ist nämlich nicht möglich, anstelle der Variablen im Ausdruck ${variable} einen Ausdruck einzusetzen. Für diejenigen, die schon einmal in C programmiert haben: Es gibt nichts Vergleichbares zu den Funktionen [printf, sprintf], um formatierte Zeichenketten zu schreiben oder zu erstellen. Hunderte von Entwicklern haben Tausende von JavaScript-Paketen entwickelt, die ein riesiges Ökosystem bilden. Wenn es einen Bedarf gibt, der von JavaScript nicht nativ abgedeckt wird, ist es an der Zeit, nach einem Paket zu suchen, das diesen Bedarf erfüllt. Dazu verwenden wir den Paketmanager [npm]. Dieser verfügt über eine Option [search], mit der man in der Beschreibung der Pakete nach einer Zeichenfolge suchen kann. [npm] gibt die Liste der Pakete zurück, die der Suche entsprechen. Wir suchen also nach der Zeichenfolge [sprintf] in der Beschreibung der Pakete:

Image

  • in der Spalte [4] die Schlüsselwörter der Pakete aus der Spalte [3];
  • in der Spalte „[5]“ die Beschreibung der Pakete aus der Spalte „[3]“;

Der nächste Schritt besteht darin, die Website des Tools [npm], [https://www.npmjs.com/] aufzurufen und die Beschreibung der Pakete zu lesen:

Image

In [3] sehen wir uns die Liste der Pakete an und wählen eines aus.

Image

In der Paketbeschreibung finden Sie Informationen zur Installation und Verwendung:

Image

Wir installieren das Paket [sprintf-js] in einem Terminal von [VSCode]:

Image

Diese Installation ändert die Datei [package.json], die sich im Stammverzeichnis des Ordners [javascript] [2] befindet:

Image

Wie oben zu sehen ist, wurde das Paket in den [dependencies] installiert, d. h. in den Paketen, die für die Ausführung des Projekts erforderlich sind. Zur Erinnerung: In [devDependencies] werden die erforderlichen Pakete ausschließlich während der Projektentwicklung abgelegt. Sie werden während der Ausführung nicht verwendet. Dieser Unterschied ist wichtig, wenn die endgültige Version des Projekts für die Produktionsumgebung erstellt werden muss. Es gibt Tools, um:

  • alle für die Ausführung erforderlichen jS-Dateien in einer einzigen Datei zusammenzufassen. Die Pakete aus den [devDependencies]-Dateien sind daher in dieser endgültigen Datei nicht enthalten;
  • diese zu minimieren, d. h. ihre Größe so gering wie möglich zu halten. Dazu werden beispielsweise alle Kommentare entfernt;
  • den Code zu „verschleiern“, um ihn schwer verständlich zu machen. Beispielsweise werden die Variablen „Satz“, „Gehalt“ und „Steuer“ durch die Variablen „a“, „b“ und „c“ ersetzt;
  • weitere Optimierungen vornehmen;

Diese Optimierung der endgültigen Datei eines jS-Projekts wird in der Webprogrammierung verwendet. Eine Webanwendung kann von sehr vielen JavaScript-Dateien abhängig sein. Das Laden dieser Dateien durch einen Browser kann die Anzeige der ersten Seite der Anwendung verlangsamen. Die vorgenannte Optimierung zielt darauf ab, diese Ladezeit zu verkürzen. Wenn die Ladezeit von den Nutzern als zu lang empfunden wird, wird die Anwendung nicht genutzt.

Da wir nun über das Paket [sprintf-js] verfügen, müssen wir es nutzen. Es handelt sich um das Skript [str-04]:


'use strict';
// Verwendung eines externen Pakets, um die Funktion `sprintf` nutzen zu können
import { sprintf } from 'sprintf-js';
// Zeichenkette
const chaîne = "Introduction à Javascript par l'exemple";
// Methode
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

Mit ECMAScript 6 verwenden wir das Schlüsselwort [import], um ein von einem Paket exportiertes Objekt zu importieren. Um herauszufinden, was das Paket exportiert, können wir uns dessen Code ansehen:

Image

  • in [1] mit einem Rechtsklick auf das importierte Paket;
  • in [2] möchte man die Definition einsehen;
  • in [3-4] sieht man, dass das Paket eine Funktion namens [sprintf] exportiert;

Die Funktion [sprintf] aus dem Paket [sprintf-js] wird mit der Anweisung importiert:


import { sprintf } from 'sprintf-js';

Der vollständige Code:


'use strict';
// Verwendung eines externen Pakets, um die Funktion `sprintf` nutzen zu können
import { sprintf } from 'sprintf-js';
// Zeichenkette
const chaîne = "Introduction à Javascript par l'exemple";
// Methode
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

liefert folgende Ergebnisse:


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\strings\str-04.js"
c:\Temp\19-09-01\javascript\strings\str-04.js:3
import { sprintf } from 'sprintf-js';
^

SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)

Zeile 3: Der Befehl [import] wird nicht verstanden. Dies liegt daran, dass die in diesem Kurs verwendete Version 10.15.1 von [node.js] (September 2019) den Standard ECMAScript für den Import von Paketen, die als Module bezeichnet werden, noch nicht unterstützt. Im Jahr 2019 entspricht [node.js] einem Modulstandard namens CommonJS. Die Integration der ECMAScript-Module durch [node.js] ist für 2020 vorgesehen. Auch hier haben sich Entwickler an die Arbeit gemacht und Pakete erstellt, die bereits jetzt (2019) die Verwendung von Modulen ES6 mit [node.js] ermöglichen.

Wir werden ein Paket namens [esm] (ECMAScript-Module) verwenden. Wir installieren es in einem Terminal des Projekts [javascript]:

Image

In [4] lässt sich feststellen, dass die Installation des Pakets [esm] [1-3] die Datei [javascript/package.json] verändert hat.

Wir sind noch nicht fertig. Damit das Modul [esm] von [node.js] verwendet wird, muss dieses mit dem Argument [-r esm] gestartet werden.

Wir ändern daher die Konfiguration der Erweiterung [Code Runner] von [VSCode]:

Image

Image

In [11] fügen wir das Argument [-r esm] hinzu und speichern (Strg-S) die Konfiguration.

Nun können wir das Skript [str-04] ausführen:


'use strict';
// Verwendung eines externen Pakets, um die Funktion `sprintf` nutzen zu können
import { sprintf } from 'sprintf-js';
// Zeichenkette
const chaîne = "Introduction à Javascript par l'exemple";
// Methode substr
console.log(sprintf("[%s].substr(3,2)=[%s]", chaîne, chaîne.substr(3, 2)));

Image

6.5. Skript [str-05]

In der Dokumentation zur Funktion [sprintf] heißt es:

Die Platzhalter in der Formatzeichenfolge sind mit % gekennzeichnet und werden in dieser Reihenfolge von einem oder mehreren der folgenden Elemente gefolgt:

  • Eine optionale Zahl, gefolgt von einem $-Zeichen, das angibt, welcher Argumentindex für den Wert verwendet werden soll. Wenn nichts angegeben wird, werden die Argumente in derselben Reihenfolge wie die Platzhalter in der Eingabezeichenfolge platziert.
  • Ein optionales Pluszeichen (+), das bei numerischen Werten erzwingt, dass dem Ergebnis ein Plus- oder Minuszeichen vorangestellt wird. Standardmäßig wird bei negativen Zahlen nur das Minuszeichen (-) verwendet.
  • Ein optionaler Auffüllbezeichner, der angibt, welches Zeichen zum Auffüllen verwendet werden soll (falls angegeben). Mögliche Werte sind 0 oder jedes andere Zeichen, dem ein ' (einfaches Anführungszeichen) vorangestellt ist. Standardmäßig wird mit Leerzeichen aufgefüllt.
  • Ein optionales Minuszeichen (-), das bewirkt, dass sprintf das Ergebnis dieses Platzhalters linksbündig ausrichtet. Standardmäßig wird das Ergebnis rechtsbündig ausgerichtet.
  • Eine optionale Zahl, die angibt, wie viele Zeichen das Ergebnis haben soll. Ist der zurückzugebende Wert kürzer als diese Zahl, wird das Ergebnis aufgefüllt. Bei Verwendung mit dem Typbezeichner j (JSON) gibt die Auffülllänge die für die Einrückung verwendete Tabulatorgröße an.
  • Ein optionaler Präzisionsmodifikator, bestehend aus einem . (Punkt) gefolgt von einer Zahl, der angibt, wie viele Ziffern bei Gleitkommazahlen angezeigt werden sollen. Bei Verwendung mit dem Typbezeichner g gibt er die Anzahl der signifikanten Ziffern an. Bei Verwendung auf einer Zeichenkette bewirkt er, dass das Ergebnis gekürzt wird.
  • Ein Typbezeichner, der eine der folgenden Formen annehmen kann:
    • % — liefert das Literalzeichen „%“
    • b — liefert eine Ganzzahl als Binärzahl
    • c — liefert eine Ganzzahl als Zeichen mit dem entsprechenden Wert
    • d oder i – liefert eine Ganzzahl als vorzeichenbehaftete Dezimalzahl
    • e — liefert eine Gleitkommazahl in wissenschaftlicher Notation
    • u — liefert eine Ganzzahl als vorzeichenlose Dezimalzahl
    • f — liefert einen Float-Wert unverändert; siehe Hinweise zur Genauigkeit oben
    • g — liefert einen Float-Wert unverändert; siehe Hinweise zur Genauigkeit oben
    • o — gibt eine Ganzzahl als Oktalzahl zurück
    • s — gibt eine Zeichenkette unverändert zurück
    • t — gibt „true“ oder „false“ zurück
    • T — gibt den Typ des Arguments 1 zurück
    • v — gibt den primitiven Wert des angegebenen Arguments zurück
    • x — gibt eine Ganzzahl als Hexadezimalzahl (Kleinbuchstaben) zurück
    • X — gibt eine Ganzzahl als Hexadezimalzahl (in Großbuchstaben) zurück
    • j — gibt ein JavaScript-Objekt oder -Array als JSON-kodierte Zeichenkette zurück

Das Skript [script-05] implementiert einige dieser Formate:


'use strict';
// Verwendung eines externen Pakets, um die Funktion `sprintf` nutzen zu können
import { sprintf } from 'sprintf-js';
// Zeichenkette
const chaîne = "Javascript";
// Zeichenketten
console.log(sprintf("[%s, %%s]=>[%s]", chaîne, chaîne));
console.log(sprintf("[%s, %%20s]=>[%20s]", chaîne, chaîne));
console.log(sprintf("[%s, %%-20s]=>[%-20s]", chaîne, chaîne));
// Ganzzahlen
console.log(sprintf("[%d, %%d]=>[%d]", 10, 10));
console.log(sprintf("[%d, %%4d]=>[%4d]", 10, 10));
console.log(sprintf("[%d, %%-4d]=>[%-4d]", 10, 10));
console.log(sprintf("[%d, %%04d]=>[%04d]", 10, 10));
// Gleitkommazahlen
console.log(sprintf("[%f, %%f]=>[%f]", -10.5, -10.5));
console.log(sprintf("[%f, %%10.2f]=>[%10.2f]", -10.5, -10.5));
console.log(sprintf("[%f, %%-10.2f]=>[%-10.2f]", -10.5, -10.5));
console.log(sprintf("[%f, %%010.3f]=>[%010.3f]", -10.5, -10.5));
// JSON
console.log(sprintf("personne (%%j)=%j", { nom: "mathieu", âge: 34 }));
// Typ
console.log(sprintf("type personne (%%T)=%T", { nom: "mathieu", âge: 34 }));
// Boolesche Werte
console.log(sprintf("booléen (%%t)=%t", 4 === 4));

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\strings\str-05.js"
[Javascript, %s]=>[Javascript]
[Javascript, %20s]=>[ Javascript]
[Javascript, %-20s]=>[Javascript ]
[10, %d]=>[10]
[10, %4d]=>[ 10]
[10, %-4d]=>[10 ]
[10, %04d]=>[0010]
[-10.5, %f]=>[-10.5]
[-10.5, %10.2f]=>[ -10.50]
[-10.5, %-10.2f]=>[-10.50 ]
[-10.5, %010.3f]=>[-00010.500]
personne (%j)={"nom":"mathieu","âge":34}
type personne (%T)=object
booléen (%t)=true

6.6. Skript [str-06]

Das Skript [str-06] stellt einige Methoden der Klasse [String] vor, die auch für den Typ [string] verwendet werden können:


'use strict';
// Verwendung eines externen Pakets, um die Funktion sprintf nutzen zu können
import { sprintf } from 'sprintf-js';
// Zeichenkette
const chaîne = "  Introduction à Javascript ";
// einige Methoden
// substr(10,2): 2 Zeichen ab Position 10
console.log(sprintf("[%s].substr(10,2)=[%s]", chaîne, chaîne.substr(10, 2)));
// trim: Entfernen von Leerzeichen am Anfang und Ende der Zeichenkette (Leerzeichen = \b \t \r \n \f)
console.log(sprintf("[%s].trim()=[%s]", chaîne, chaîne.trim()));
// toLowerCase: Umwandlung in Kleinbuchstaben
console.log(sprintf("[%s].toLowerCase=[%s]", chaîne, chaîne.toLowerCase()));
// toUpperCase: Umwandlung in Großbuchstaben
console.log(sprintf("[%s].toUpperCase=[%s]", chaîne, chaîne.toUpperCase()));
// indexOf: Position einer gesuchte n Zeichenfolge in der Zeichenfolge, -1, wenn die Teilzeichenfolge nicht vorhanden ist
console.log(sprintf("[%s].indexOf('Java')=[%s]", chaîne, chaîne.indexOf('Java')));
console.log(sprintf("[%s].trim().indexOf('abcd')=[%s]", chaîne, chaîne.indexOf('abcd')));
// includes: wahr, wenn die gesuchte Zeichenfolge in der Zeichenfolge enthalten ist
console.log(sprintf("[%s].includes('Java')=[%s]", chaîne, chaîne.includes('Java')));
// length: Länge der Zeichenkette – ist keine Methode, sondern eine Eigenschaft
console.log(sprintf("[%s].length=[%s]", chaîne, chaîne.length));
// slice (7,10): Zeichenfolge von Zeichen Nr. 7 bis 9
console.log(sprintf("[%s].slice(7,10)=[%s]", chaîne, chaîne.slice(7, 10)));
// match: Sucht nach einem Ausdruck in der Zeichenkette – dieser Ausdruck kann ein regulärer Ausdruck sein
// /intro/i: regulärer Ausdruck, der die Zeichenfolge [intro] in Groß- oder Kleinbuchstaben bezeichnet
// gibt die gefundene Zeichenfolge zurück
console.log(sprintf("[%s].match(/intro/i)=[%s]", chaîne, chaîne.match(/intro/i)));
// replace: Ersetzt Zeichenfolge1 durch Zeichenfolge2 in der Zeichenfolge
// ersetzt das erste Vorkommen von i durch x
console.log(sprintf("[%s].replace('i','x')=[%s]", chaîne, chaîne.replace('i', 'x')));
// ersetzt alle Vorkommen von „i“ durch „x“
// /i/g ist ein regulärer Ausdruck, der alle (g) Vorkommen von i bezeichnet
console.log(sprintf("[%s].replace(/i/g,'x')=[%s]", chaîne, chaîne.replace(/i/g, 'x')));
// split: Teilt die Zeichenkette anhand des Split-Parameters in einzelne Wörter auf
// gibt ein Array dieser Wörter zurück
// /\s*/: Wörter, die durch 0 oder mehrere Leerzeichen getrennt sind
console.log(sprintf("[%s].split(/\\s*/)=[%s]", chaîne, chaîne.split(/\s*/)));
// /\s+/: Wörter, die durch ein oder mehrere Leerzeichen getrennt sind
console.log(sprintf("[%s].split(/\\s+/)=[%s]", chaîne, chaîne.split(/\s+/)));

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\strings\str-06.js"
[ Introduction à Javascript ].substr(10,2)=[ti]
[ Introduction à Javascript ].trim()=[Introduction à Javascript]
[ Introduction à Javascript ].toLowerCase=[ introduction à javascript ]
[ Introduction à Javascript ].toUpperCase=[ INTRODUCTION À JAVASCRIPT ]
[ Introduction à Javascript ].indexOf('Java')=[17]
[ Introduction à Javascript ].trim().indexOf('abcd')=[-1]
[ Introduction à Javascript ].includes('Java')=[true]
[ Introduction à Javascript ].length=[28]
[ Introduction à Javascript ].slice(7,10)=[duc]
[ Introduction à Javascript ].match(/intro/i)=[Intro]
[ Introduction à Javascript ].replace('i','x')=[ Introductxon à Javascript ]
[ Introduction à Javascript ].replace(/i/g,'x')=[ Introductxon à Javascrxpt ]
[ Introduction à Javascript ].split(/\s*/)=[,I,n,t,r,o,d,u,c,t,i,o,n,à,J,a,v,a,s,c,r,i,p,t,]
[ Introduction à Javascript ].split(/\s+/)=[,Introduction,à,Javascript,]
https://stahe.github.io
Dieses Tutorial, verfasst von Serge Tahé, wird der Öffentlichkeit unter den Bedingungen der Creative Commons Namensnennung – Nicht kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported.