JavaScript-Variablen können auf vier Arten deklariert werden:
Automatisch
Verwendung von var
Mit let
Verwenden von const
In diesem ersten Beispiel x
, y
und z
sind nicht deklarierte Variablen.
Sie werden bei der ersten Verwendung automatisch deklariert:
x = 5;
y = 6;
z = x + y;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Es gilt als gute Programmierpraxis, Variablen vor der Verwendung immer zu deklarieren.
Anhand der Beispiele können Sie erraten:
x speichert den Wert 5
y speichert den Wert 6
z speichert den Wert 11
var x = 5;
var y = 6;
var z = x + y;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Das Schlüsselwort var
wurde im gesamten JavaScript-Code von 1995 bis 2015 verwendet.
Die Schlüsselwörter let
und const
wurden 2015 zu JavaScript hinzugefügt.
Das Schlüsselwort var
sollte nur in Code verwendet werden, der für ältere Browser geschrieben wurde.
let x = 5;
let y = 6;
let z = x + y;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
Die beiden Variablen price1
und price2
werden mit dem Schlüsselwort const
deklariert.
Dies sind konstante Werte und können nicht geändert werden.
Die Variable total
wird mit dem Schlüsselwort let
deklariert.
Der Wert total
kann geändert werden.
1. Deklarieren Sie immer Variablen
2. Verwenden Sie immer const
, wenn der Wert nicht geändert werden soll
3. Verwenden Sie immer const
, wenn der Typ nicht geändert werden soll (Arrays und Objekte)
4. Verwenden Sie let
nur, wenn Sie const
nicht verwenden können
5. Verwenden Sie var
nur, wenn Sie alte Browser unterstützen MÜSSEN.
Genau wie in der Algebra enthalten Variablen Werte:
let x = 5;
let y = 6;
Genau wie in der Algebra werden Variablen in Ausdrücken verwendet:
let z = x + y;
Anhand des obigen Beispiels können Sie erraten, dass die Gesamtsumme 11 beträgt.
Variablen sind Container zum Speichern von Werten.
Alle JavaScript-Variablen müssen sein identifiziert mit einzigartigen Namen.
Diese eindeutigen Namen werden Identifikatoren genannt.
Bezeichner können Kurznamen (wie x und y) oder aussagekräftigere Namen (Alter, Summe, Gesamtvolumen) sein.
Die allgemeinen Regeln zum Erstellen von Namen für Variablen (eindeutige Bezeichner) sind:
Namen können Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten.
Namen müssen mit einem Buchstaben beginnen.
Namen können auch mit $und _ beginnen (wir werden sie in diesem Tutorial jedoch nicht verwenden).
Bei Namen muss die Groß-/Kleinschreibung beachtet werden (y und Y sind unterschiedliche Variablen).
Reservierte Wörter (wie JavaScript-Schlüsselwörter) können nicht als Namen verwendet werden.
Bei JavaScript-Bezeichnern muss die Groß-/Kleinschreibung beachtet werden.
In JavaScript ist das Gleichheitszeichen (=
) ein „Zuweisungs“-Operator, kein „gleich“-Operator.
Das ist etwas anderes als Algebra. Folgendes ergibt keinen Sinn Algebra:
x = x + 5
In JavaScript macht es jedoch durchaus Sinn: Es weist den Wert x + 5 zu X.
(Es berechnet den Wert von x + 5 und gibt das Ergebnis in x ein. Der Wert von x wird um 5 erhöht.)
Der „gleich“-Operator wird in JavaScript wie folgt geschrieben: ==
.
JavaScript-Variablen können Zahlen wie 100 und Textwerte wie „John“ enthalten Damhirschkuh".
In der Programmierung werden Textwerte als Textzeichenfolgen bezeichnet.
JavaScript kann viele Arten von Daten verarbeiten, aber denken Sie zunächst nur an Zahlen und Zeichenfolgen.
Zeichenfolgen werden in doppelte oder einfache Anführungszeichen geschrieben. Zahlen werden geschrieben ohne Anführungszeichen.
Wenn Sie eine Zahl in Anführungszeichen setzen, wird sie als Textzeichenfolge behandelt.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Das Erstellen einer Variablen in JavaScript wird als „Deklarieren“ einer Variablen bezeichnet.
Sie deklarieren eine JavaScript-Variable mit dem Schlüsselwort var
oder dem Schlüsselwort let
:
var carName;
let carName;
Nach der Deklaration hat die Variable keinen Wert (technisch gesehen ist sie undefiniert
).
Um der Variablen einen Wert zuzuweisen, verwenden Sie das Gleichheitszeichen:
carName = "Volvo";
Sie können der Variablen auch einen Wert zuweisen, wenn Sie sie deklarieren:
let carName = "Volvo";
Im folgenden Beispiel erstellen wir eine Variable mit dem Namen carName
und weisen den Wert zu „Volvo“ dazu.
Dann „geben“ wir den Wert in einem HTML-Absatz mit id="demo" aus:
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Es ist eine gute Programmierpraxis, alle Variablen am Anfang eines Skripts zu deklarieren.
Sie können viele Variablen in einer Anweisung deklarieren.
Beginnen Sie mit der Aussage mit let
und trennen Sie die Variablen durch Komma:
let person = "John Doe", carName = "Volvo", price = 200;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Eine Deklaration kann sich über mehrere Zeilen erstrecken:
let person = "John Doe",
carName = "Volvo",
price = 200;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
In Computerprogrammen werden Variablen oft ohne Wert deklariert. Der Wert kann etwas sein, das berechnet werden muss, oder etwas, das bereitgestellt wird später, wie Benutzereingaben.
Eine ohne Wert deklarierte Variable hat den Wert undefiniert
.
Die Variable carName hat nach der Ausführung dieser Anweisung den Wert undefiniert
:
let carName;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Wenn Sie eine mit var
deklarierte JavaScript-Variable erneut deklarieren, verliert sie ihren Wert nicht.
Die Variable carName
wird nach der Ausführung dieser Anweisungen weiterhin den Wert „Volvo“ haben:
var carName = "Volvo";
var carName;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Sie können eine mit let
oder const
deklarierte Variable nicht erneut deklarieren.
Das wird nicht funktionieren:
let carName = "Volvo";
let carName;
Wie in der Algebra können Sie mit JavaScript-Variablen rechnen Operatoren wie =
und +
:
let x = 5 + 2 + 3;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Sie können auch Zeichenfolgen hinzufügen, die Zeichenfolgen werden jedoch verkettet:
let x = "John" + " " + "Doe";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Versuchen Sie auch Folgendes:
let x = "5" + 2 + 3;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Wenn Sie eine Zahl in Anführungszeichen setzen, werden die restlichen Zahlen als Zeichenfolgen behandelt und verkettet.
Versuchen Sie nun Folgendes:
let x = 2 + 3 + "5";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Da JavaScript ein Dollarzeichen als Buchstaben behandelt, sind Bezeichner, die $enthalten, gültige Variablennamen:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
Die Verwendung des Dollarzeichens ist in JavaScript nicht sehr verbreitet. aber professionelle Programmierer verwenden es oft als Alias für die Hauptfunktion in einer JavaScript-Bibliothek.
In der JavaScript-Bibliothek jQuery beispielsweise die Hauptfunktion $
wird zur Auswahl von HTML-Elementen verwendet. In jQuery bedeutet $ ("p");
„alle p Elemente auswählen“.
Da JavaScript den Unterstrich als Buchstaben behandelt, sind Bezeichner, die _ enthalten, gültige Variablennamen:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Die Verwendung des Unterstrichs ist in JavaScript nicht sehr verbreitet. Unter professionellen Programmierern ist es jedoch üblich, es als Alias für zu verwenden „private (versteckte)“ Variablen.