JavaScript-Strings

Inhaltsverzeichnis

JavaScript-Strings dienen zum Speichern und Bearbeiten von Text.

Eine JavaScript-Zeichenfolge besteht aus null oder mehr Zeichen, die in Anführungszeichen geschrieben sind.

Beispiel

let text = "John Doe";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
let text = "John Doe";  // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Sie können einfache oder doppelte Anführungszeichen verwenden:

Beispiel

let carName1 = "Volvo XC60";  
  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Strings are written inside quotes. You can use single or double quotes:</p>

<p id="demo"></p>

<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes

document.getElementById("demo").innerHTML =
carName1 + " " + carName2; 
</script>

</body>
</html>

Sie können Anführungszeichen innerhalb einer Zeichenfolge verwenden, solange diese nicht mit den Anführungszeichen übereinstimmen umgibt die Zeichenfolge:

Beispiel

let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>

<p id="demo"></p>

<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"'; 

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>

</body>
</html>

String-Länge

Um die Länge einer Zeichenfolge zu ermitteln, verwenden Sie die integrierte Eigenschaft length:

Beispiel

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>

Escape-Zeichen

Da Zeichenfolgen in Anführungszeichen geschrieben werden müssen, missversteht JavaScript diese Zeichenfolge:

let text = "We are the so-called "Vikings" from the north.";

Die Zeichenfolge wird auf „Wir sind die sogenannten“ gekürzt.

Die Lösung zur Vermeidung dieses Problems besteht in der Verwendung des Backslash-Escape-Zeichens.

Das Escape-Zeichen Backslash (\) wandelt Sonderzeichen in Zeichenfolgen um:

Code	Result	Description
\'	'	Single quote
\"	"	Double quote
\\	\	Backslash

Die Sequenz \" fügt ein doppeltes Anführungszeichen in eine Zeichenfolge ein:

Beispiel

let text = "We are the so-called \"Vikings\" from the north.";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \" inserts a double quote in a string.</p>

<p id="demo"></p>

<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Die Sequenz \' fügt ein einfaches Anführungszeichen in eine Zeichenfolge ein:

Beispiel

let text= 'It\'s alright.';

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \' inserts a single quote in a string.</p>

<p id="demo"></p>

<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Die Sequenz \\ fügt einen Backslash in eine Zeichenfolge ein:

Beispiel

let text = "The character \\ is called backslash.";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \\ inserts a backslash in a string.</p>

<p id="demo"></p>

<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

Sechs weitere Escape-Sequenzen sind in JavaScript gültig:

\b: Rücktaste
\f: Formularvorschub
\n: Neue Zeile
\r: Wagenrücklauf
\t: Horizontaler Tabulator
\v: Vertikaler Tabulator

Die 6 oben genannten Escape-Zeichen waren ursprünglich zur Steuerung gedacht Schreibmaschinen, Fernschreiber und Faxgeräte. Sie ergeben in HTML keinen Sinn.

Lange Codezeilen brechen

Für eine optimale Lesbarkeit vermeiden Programmierer häufig Codezeilen, die länger als sind 80 Zeichen.

Wenn eine JavaScript-Anweisung nicht in eine Zeile passt, ist dies die beste Stelle zum Umbrechen es steht nach einem Operator:

Beispiel

document.getElementById("demo").innerHTML =
"Hello Dolly!";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>

</body>
</html>

Sie können eine Codezeile innerhalb einer Textzeichenfolge auch mit einem einzelnen Backslash unterbrechen:

Beispiel

document.getElementById("demo").innerHTML = 
"Hello \
Dolly!";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

Die Methode \ ist nicht die bevorzugte Methode. Möglicherweise gibt es keine universelle Unterstützung.
Einige Browser tun dies Erlauben Sie keine Leerzeichen hinter dem Zeichen \.

Eine sicherere Möglichkeit, eine Zeichenfolge aufzubrechen, ist die Verwendung von Zeichenfolgen Zusatz:

Beispiel

document.getElementById("demo").innerHTML = "Hello " + 
"Dolly!";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

Sie können eine Codezeile nicht mit einem Backslash unterbrechen:

Beispiel

document.getElementById("demo").innerHTML = \ 
"Hello Dolly!";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p id="demo">You cannot break a code line with a \ backslash.</p>

<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>

</body>
</html>

JavaScript-Strings als Objekte

Normalerweise sind JavaScript-Strings primitive Werte, die aus Literalen erstellt werden:

let x = "John";

Strings können aber auch mit dem Schlüsselwort new als Objekte definiert werden:

let y = new String("John");

Beispiel

let x = "John";
let y = new String("John");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
// x is a string
let x = "John";

// y is an object
let y = new String("John");

document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>

</body>
</html>

Erstellen Sie keine Strings-Objekte.

Das Schlüsselwort new verkompliziert den Code und verlangsamt die Ausführungsgeschwindigkeit.

String-Objekte können zu unerwarteten Ergebnissen führen:

Bei Verwendung des Operators == sind x und y gleich:

let x = "John";
let y = new String("John");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Bei Verwendung des Operators === sind x und y nicht gleich:

let x = "John";
let y = new String("John");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Beachten Sie den Unterschied zwischen (x==y) und (x===y).

(x == y) wahr oder falsch?

let x = new String("John");
let y = new String("John");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) wahr oder falsch?

let x = new String("John");
let y = new String("John");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Der Vergleich zweier JavaScript-Objekte gibt immer false zurück.

Vollständige String-Referenz

Eine vollständige String-Referenz finden Sie in unserem:

Vollständige JavaScript-String-Referenz.

Die Referenz enthält Beschreibungen und Beispiele aller String-Eigenschaften und -Methoden.